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
0
98

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

Avatar for Toru Furuya

Toru Furuya

November 07, 2017
Tweet

More Decks by Toru Furuya

See All by Toru Furuya
How To Built Uranow Android App
Avatar for Toru Furuya torufuruya
0
66
Automatic Kotlin Lint with Pipeline and Danger
Avatar for Toru Furuya torufuruya
0
100
Realm Academyのすすめ
Avatar for Toru Furuya torufuruya
0
43
Git subtree の導入
Avatar for Toru Furuya torufuruya
0
110
CI as Code の導入
Avatar for Toru Furuya torufuruya
0
41
Objective-Cのpropertyのこと
Avatar for Toru Furuya torufuruya
0
51
Getting Started Yeoman
Avatar for Toru Furuya torufuruya
0
42

Featured

See All Featured
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
1
340
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
140
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
61
51k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
0
200
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
200
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.2k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
7k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
220k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Between Models and Reality
Avatar for mayunak mayunak
1
160

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