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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
72
Automatic Kotlin Lint with Pipeline and Danger
Avatar for Toru Furuya torufuruya
0
110
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
51
Objective-Cのpropertyのこと
Avatar for Toru Furuya torufuruya
0
58
Getting Started Yeoman
Avatar for Toru Furuya torufuruya
0
47

Featured

See All Featured
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
410
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
3k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
9
980
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
310
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
25k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4.3k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
310
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k

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