Upgrade to Pro — share decks privately, control downloads, hide ads and more …

iPhone XでのSafe AreaとWebコンテンツの表示制限について

Avatar for Toru Furuya Toru Furuya
November 07, 2017
100
0

iPhone XでのSafe AreaとWebコンテンツの表示制限について

Avatar for Toru Furuya

Toru Furuya

November 07, 2017

More Decks by Toru Furuya

See All by Toru Furuya
How To Built Uranow Android App
Avatar for Toru Furuya torufuruya
0
70
Automatic Kotlin Lint with Pipeline and Danger
Avatar for Toru Furuya torufuruya
0
110
Realm Academyのすすめ
Avatar for Toru Furuya torufuruya
0
46
Git subtree の導入
Avatar for Toru Furuya torufuruya
0
120
CI as Code の導入
Avatar for Toru Furuya torufuruya
0
47
Objective-Cのpropertyのこと
Avatar for Toru Furuya torufuruya
0
55
Getting Started Yeoman
Avatar for Toru Furuya torufuruya
0
45

Featured

See All Featured
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
290
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
750
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
850
Design in an AI World
Avatar for tapps tapps
1
250
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.3k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.5k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
540
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
34k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
52k

Transcript

  1. iPhone XͰͷSafe Areaͱ Webίϯςϯπͷද੍ࣔݶʹ͍ͭͯ 2017.11.07 Toru Furuya 1

  2. TL;DR ͜ΕಡΊ͹Θ͔Δ iPhone XͰSafe Area֎ʹWebίϯςϯπ͕දࣔͰ͖ͳ͍ htmlͷ<header>ʹಛఆͷviewportΛ௥Ճ͢Δ͜ͱͰSafe Area ֎ʹ΋WebίϯςϯπΛදࣔ͢Δ͜ͱ͕Մೳ 2

  3. ࠓ೔࿩͞ͳ͍͜ͱ Safe Areaʹ͍ͭͯͷৄࡉͳઆ໌ʢࣗ෼΋·ͩ෼͔ͬͯͳ͍ʣ 3

  4. Ҿ༻ɿhttps://medium.com/@onopko “iPhone X ʹ͸σΟεϓϨΠͷ্Լࠨӈʹ iOS ͷ઎ ༗ྖҬ͕ଘࡏ͠ɺͦΕҎ֎ʢΞϓϦͷλονΠϕϯ τΛೝΊΔྖҬʣΛ Safe Area

    ͱݺͿΑ͏Ͱ͢ɻSafe Area ͷ֎ʹ͋Δ্෦ྖҬʹ͸εςʔλεόʔͱͯ͠ ࣌ܭ΍ΞϯςφͷΠϯδέʔλͳͲ iOS ͷγεςϜ ΞΠίϯ౳͕ฒͼɺԼ෦ͷྖҬʹ͸ iPhone X Ͱಋೖ ͞ΕͨʮϗʔϜόʔʯ͕ଘࡏ͢Δ͜ͱʹͳΓ·͢ɻ” 4

  5. ໰୊ͷࣄ৅ ΞυϑϦ͘Μόφʔ޿ࠂ 5

  6. WEBίϯςϯπҎ֎͸ʁ UIImageView 6

  7. WEBίϯςϯπҎ֎͸ʁ ΞυϑϦ͘ΜಈըωΠςΟϒ޿ࠂ 7

  8. Safe Area֎ʹ΋WebίϯςϯπΛ දࣔ͢Δʹ͸ʁ 8

  9. <meta name="viewport" content="viewport-fit=cover"> metaλάͳ͠ metaλά͋Γ 9

  10. ࢀߟ https://medium.com/@onopko/iphone-x-ͷ-safari-ʹ͓͚Δ- web-ίϯςϯπͷදࣔ 10