Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
iPhone XでのSafe AreaとWebコンテンツの表示制限について
Search
Toru Furuya
November 07, 2017
0
77
iPhone XでのSafe AreaとWebコンテンツの表示制限について
Toru Furuya
November 07, 2017
Tweet
Share
More Decks by Toru Furuya
See All by Toru Furuya
How To Built Uranow Android App
torufuruya
0
59
Automatic Kotlin Lint with Pipeline and Danger
torufuruya
0
85
Realm Academyのすすめ
torufuruya
0
37
Git subtree の導入
torufuruya
0
90
CI as Code の導入
torufuruya
0
31
Objective-Cのpropertyのこと
torufuruya
0
32
Getting Started Yeoman
torufuruya
0
34
Featured
See All Featured
Building an army of robots
kneath
300
41k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Infographics Made Easy
chrislema
238
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Building Your Own Lightsaber
phodgson
100
5.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Web development in the modern age
philhawksworth
203
10k
We Have a Design System, Now What?
morganepeng
43
6.8k
Transcript
iPhone XͰͷSafe Areaͱ Webίϯςϯπͷද੍ࣔݶʹ͍ͭͯ 2017.11.07 Toru Furuya 1
TL;DR ͜ΕಡΊΘ͔Δ iPhone XͰSafe Area֎ʹWebίϯςϯπ͕දࣔͰ͖ͳ͍ htmlͷ<header>ʹಛఆͷviewportΛՃ͢Δ͜ͱͰSafe Area ֎ʹWebίϯςϯπΛදࣔ͢Δ͜ͱ͕Մೳ 2
ࠓ͞ͳ͍͜ͱ Safe Areaʹ͍ͭͯͷৄࡉͳઆ໌ʢࣗ·͔ͩͬͯͳ͍ʣ 3
Ҿ༻ɿhttps://medium.com/@onopko “iPhone X ʹσΟεϓϨΠͷ্Լࠨӈʹ iOS ͷ ༗ྖҬ͕ଘࡏ͠ɺͦΕҎ֎ʢΞϓϦͷλονΠϕϯ τΛೝΊΔྖҬʣΛ Safe Area
ͱݺͿΑ͏Ͱ͢ɻSafe Area ͷ֎ʹ͋Δ্෦ྖҬʹεςʔλεόʔͱͯ͠ ࣌ܭΞϯςφͷΠϯδέʔλͳͲ iOS ͷγεςϜ ΞΠίϯ͕ฒͼɺԼ෦ͷྖҬʹ iPhone X Ͱಋೖ ͞ΕͨʮϗʔϜόʔʯ͕ଘࡏ͢Δ͜ͱʹͳΓ·͢ɻ” 4
ͷࣄ ΞυϑϦ͘Μόφʔࠂ 5
WEBίϯςϯπҎ֎ʁ UIImageView 6
WEBίϯςϯπҎ֎ʁ ΞυϑϦ͘ΜಈըωΠςΟϒࠂ 7
Safe Area֎ʹWebίϯςϯπΛ දࣔ͢Δʹʁ 8
<meta name="viewport" content="viewport-fit=cover"> metaλάͳ͠ metaλά͋Γ 9
ࢀߟ https://medium.com/@onopko/iphone-x-ͷ-safari-ʹ͓͚Δ- web-ίϯςϯπͷදࣔ 10