Web制作者がiPhone Xの発売前に知っておきたい、Webページを表示した際に起きる現象とその解決方法

iOS 11が本日リリースされ、iPhone Xの発売を楽しみにしている人も多いと思います。
しかし、Web制作者やブログのオーナーはiPhone Xに対応しておく作業が増えるかもしれません。

iPhone Xではスクリーンが変更され、それに対応するための解決方法を紹介します。

Removing the White Bars in Safari on iPhone X

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• iPhone XでWebサイトを表示した際の問題点
• 解決方法 その1: background-color
• 解決方法 その2: viewport-fit
• 解決方法 その2 補足: safe-area-inset-*

iPhone XでWebサイトを表示した際の問題点

新しく発売されるiPhone Xは、美しいディスプレイを備えています。ポートレートでWebサイトを見るときには問題はありませんが、ランドスケープの水平で見るときには左右にあるノッチ（Notch）に小さな問題が生じます。

このノッチはWebサイトを表示した際、スクリーン上に「セーフエリア（Safe Area）」を設けます。その結果、左右にレターボックスが確保されて表示されます。

iPhone XでWebサイトを見ると、左右にレターボックスが生じる

ありがたいことに、このレターボックスを解決するための2つの簡単な方法があります。

解決方法 その1: background-color

もしWebサイトの背景がソリッドなカラーである場合は、bodyタグにbackground-colorプロパティを設定するのが最も簡単な解決策です。これで、下記のように表示されます。

背景のカラーを設定

左右のスペースはそのままですが、意図したカラーで表示されます。

解決方法 その2: viewport-fit

デザインをさらに調整したい場合や、背景にグラデーションやイメージを使用している場合は、background-colorは有効な解決策ではないかもしれません。iOSの最新バージョンでAppleは、CSS Round Display Specの仕様で、viewport-fitを追加しました。

使い方は簡単で、viewportのmetaタグに「viewport-fit=cover」を設定するだけで、セーフエリアだけでなくスクリーン全体を満たすように拡張されます。

これで、下記のように表示されます。

viewportのmetaタグに「viewport-fit=cover」を設定

この方法はノッチに対応するために、デザインの調整が必要となりますが、その対応方法はWeb制作者・デザイナーに任されています。

解決方法 その2 補足: safe-area-inset-*

SafariのiOS 11バージョンには、「viewport-fit=cover」で利用できる定数が用意されています。

• safe-area-inset-top
• safe-area-inset-right
• safe-area-inset-left
• safe-area-inset-bottom

これらはマージン、パディング、絶対位置の値（上または左など）を設定できます。

このコードを使用することで、解決方法　その2でメニューやアイコンが途切れて表示されてしまう問題を解決できます。

メニューやアイコンも正しく表示