viewport-fit=coverで対応。iPhoneのSafe Area問題。 / いがわ

.

Memo

viewport-fit=coverで対応。iPhoneのSafe Area問題。

viewport-fit=coverで、iPhoneのSafe Area外をカバー。

iPhone X以降、iPhone 14までのiPhoneは、画面内にノッチがあったりコーナーが角丸になっている。

iPhoneのSafe Area問題。

画像引用:Layout Guide, Margins, Insets and Safe Area demystified on iOS 10 & 11
Killian THORON さま

2023年9月発売のiPhone 15シリーズのモデルにはノッチがないが、円安などの影響による値上がりで普及までに時間を要する可能性がある。

スマホの場合は基本的にサイトを縦で見ることが多いので普段は特別気にならない。
ただしデザインをしっかりさせるためには対応が必要となる。

そういうときは、meta要素で「viewport-fit=cover」を指定すると良い。

通常はmeta要素でviewport〜の指定はされているはずなので、そこに「viewport-fit」を追記する。

HTML
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

すると、いわゆるSafe Area外の余白となっている領域にも、サイトのデザインが反映される。


viewport-fit=coverの指定例。

viewport-fit=coverなしの場合。

左右に意図しない白い余白部分ができる。

iPhoneの左右の余白問題。

viewport-fit=coverありの場合。

左右の白い余白部分がカバーされる。

iPhoneの左右の余白問題。

画像引用:https://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/>Removing the White Bars in Safari on iPhone X
https://stephenradford.me/author/stephen/
Stephen Radford さま

参考:https://qiita.com/daisukeoda/items/2b8cc28f176e202976b7>iPhone XのSafariで表示される謎の空白を消す方法 – Qiita
Daisuke Oda さま

iOSのChromeはカバーされないが、シェア率が低く、スマホを横にしてサイトを見るユーザーは少ないので、プログレッシブエンハンスメント的に割り切る。


Chromeのデベロッパーツールでは確認できない。

注意点としては、「viewport-fit=cover」の指定をする際は、ロゴやハンバーガーメニュー、アイコンなどの位置に気をつけなければいけない。

Chromeのデベロッパーツールにはノッチがなく、角丸でもないので、UI/UXの表示確認をきっちりとはできない。

XCode。

MacのXCodeのシミュレータで確認できるらしいが、重たいXCodeを立ち上げるのはちょっと腰が引ける。開発環境に余裕があれば「BrowserStack」の利用もできるが、無料プランでは厳しそうな感じだ。

なので、結局実機で確認するのがベストとなる。

もし実機や開発環境が難しい場合は、モックアップなどの画像を参考にイメージはできる。

スマホを横にした状態(Landscape)で、左右にmarginやpaddingなどで余白を想定する。iPhoneのSafe Area対応に限らず、常に余白のあるデザイン制作を意識しておけばそれほど対応は難しくないかもしれない。

関連:Chromeデベロッパーツールでスマホ表示チェックする際の注意点。


env()関数の使用。

MDNサイトによると、Safe Areaにenv()関数を使ったpaddingの指定もできるようだ。

CSS
body {
 padding:
  env(safe-area-inset-top, 20px)
  env(safe-area-inset-right, 20px)
  env(safe-area-inset-bottom, 20px)
  env(safe-area-inset-left, 20px);
}

参考 MDN:env() – CSS: カスケーディングスタイルシート | MDN


iPhone 14シリーズへの対応。

iPhone 14の一部のモデルからはノッチの形状が変わっており、角も丸い。

画面の形状が変わってはいるが、対応としては下記の画像からイメージし、HTMLの「viewport-fit」とCSSの「padding」や「margin」の指定で対応できる。

iphone 14 Plus

iphone 14 Plus

iPhone 14 Pro

iPhone 14 Pro

画像引用:How iOS Apps Adapt to the various iPhone 14 Screen Sizes

Geoff Hackworth さま

iPhone 14の解像度と、画像サイズ、CSSのピクセル設定をどうするか?

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

井川 宜久 / Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。