Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for Toru Furuya Toru Furuya
November 07, 2017
110
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
73
Automatic Kotlin Lint with Pipeline and Danger
Avatar for Toru Furuya torufuruya
0
120
Realm Academyのすすめ
Avatar for Toru Furuya torufuruya
0
50
Git subtree の導入
Avatar for Toru Furuya torufuruya
0
120
CI as Code の導入
Avatar for Toru Furuya torufuruya
0
54
Objective-Cのpropertyのこと
Avatar for Toru Furuya torufuruya
0
60
Getting Started Yeoman
Avatar for Toru Furuya torufuruya
0
51

Featured

See All Featured
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
570
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
232
55k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.8k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
910
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
2
6.3k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
53
4k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
10
2.4k

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