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
69
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
44

Featured

See All Featured
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
130
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
61
43k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
7
1.7k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.2k

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