WebKit公式サイトを含め、多くのWebサイトで解説されている「iPhone X対応のWebページの作り方」はiOS 11.11系まで、またはiOS 11.12以上のどちらか一方にしか対応していないため、その両方に対応する書き方について解説します。
この記事の内容は「スマートフォン時代のWebコーディングスクール」の授業資料の一部です。
iPhone X対応していないWebページはどう見えるのか
縦持ちでは特に問題ありませんが、横持ちの場合画面の左右に空白ができてしまいます。
たとえば、このブログの記事ページを横持ちで観ると以下の画像のように見えます。
このブログの場合、bodyの背景色は濃い茶色、ページ全体を包んでいるwrapper要素に背景画像が設定されています。
iPhone Xのセーフエリアについて
iPhone Xのディスプレイを横向きにした時、センサーハウジングや角丸の部分を除いた「セーフエリア」とよばれる領域があります。
iPhone X対応していない場合、このセーフエリアはbodyの背景色になり、テキストなどのコンテンツがセーフエリアに表示されることはありません。
セーフエリアの外までコンテンツを表示させるには、以下の要素をHTMLのhead要素内に入れます。
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
一般的なスマートフォン対応ののviewportとの違いは “viewport-fit=cover” が入っていることです。
しかしこのままだと、ページ内の本文テキストや写真などのコンテンツがセンサーハウジングなどと被ってしまい、コンテンツの一部を見ることができない場合があります。
そこで、CSSを使用してコンテンツ部分のみセーフエリア内に配置することができます。
しかしその方法が、iOS 11.1以下と11.2以上で異なります。
iOS 11.1までの方法
WebKitのサイトには、iOS 11.1までは、ページ全体を囲む .wrapper 要素を作り、そこに以下のようなスタイルを適用することと書かれていました。
.wrapper {
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
}
paddingの値が4つに分かれて書かれていますが、これはそれぞれtop, right, bottom, leftを指定しています。
セーフエリアの大きさは左右と上下で異なるため、まとめて一括指定はできません。
iOS 11.2からの方法
しかし、constant() はiOS 11.2のSafariでは無効（廃止）になり、代わりにenv()を使用することとなっています。
現在WebKitのサイトには以下のように書かれています。
.wrapper {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
しかし、HTMLのviewport-fit=cover指定+この記述では、iOS 11.1までのiPhone Xではコンテンツがセーフエリアとかぶってしまうという問題があります。
どちらでも動くようにするには
両方で動くようにするには、以下のように併記する方法があります。
.wrapper {
/* iPhone X 以外にpaddingをつける場合ここに書く /
padding: 10px;
/ iPhone X iOS 11.1以下: Safe Aria内に配置 /
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
/ iPhone X iOS 11.2以上: Safe Aria内に配置 */
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
これで、どのバージョンのiPhone Xでも、それ以外の端末でも適切なpaddingを指定することができます。
