viewport-fit=coverで対応。iPhoneのSafe Area問題。
viewport-fit=coverで、iPhoneのSafe Area外をカバー。
iPhone X以降、iPhone 14までのiPhoneは、画面内にノッチがあったりコーナーが角丸になっている。
画像引用：Layout Guide, Margins, Insets and Safe Area demystified on iOS 10 & 11
Killian THORON さま
スマホの場合は基本的にサイトを縦で見ることが多いので普段は特別気にならない。
ただしデザインをしっかりさせるためには対応が必要となる。
そういうときは、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なしの場合。
左右に意図しない白い余白部分ができる。
viewport-fit=coverありの場合。
左右の白い余白部分がカバーされる。
画像引用：Removing the White Bars in Safari on iPhone X
Stephen Radford さま
参考：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 Pro
画像引用：How iOS Apps Adapt to the various iPhone 14 Screen Sizes
Geoff Hackworth さま
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。
