viewport-fit=coverで対応。iPhoneのSafe Area問題。|デザイナー、コーチ、ディレクターズメモ|井川

igawa design.

Memo

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

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

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

iPhoneのSafe Area問題。

画像引用: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なしの場合。

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

iPhoneの左右の余白問題。

viewport-fit=coverありの場合。

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

iPhoneの左右の余白問題。

画像引用: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の表示確認をきっちりとはできない。

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

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

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

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


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の一部のモデルからはノッチの形状が変わっており、角も丸い。

画面の形状が変わってはいるが、対応としては下記の画像からイメージし、「viewport-fit」と「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年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

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

お問い合わせ CONTACT..


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお客さま対応のみでの利用とさせていただいております。
    • 社会的に正当な理由、法に基づいた理由がない限り、第三者へ開示することはありません。