iPhone Xに対応していないWebサイトの見た目はどうなるのか

まず、iPhone Xに対応していないWebサイトはSafariブラウザではどのように表示されるのでしょうか？

ポートレートモードでは一見正しく表示されます。
下向きにスクロールするとステータスバーが表示されなくなり、画面下部のラウンドした領域にもコンテンツが表示されます。

早い話が、追尾型広告のようなページ下部に表示されるコンテンツに重要なコンテンツやナビゲーションを配置すると、クリックされない可能性が高くなります。

また、ランドスケープモードでははっきりと違いがわかります。
ツールバーやステータスバーは全画面で表示されます。

中央左右に安全領域がありますが、それ以外の部分もbody要素のbackground-colorで描画されます。

なお、背景画像を指定していても無視されるということを覚えておきましょう。
そのほかにも、セーフエリアの存在でデザイナーが意図した描画がされない状態になります。

iPhone Xに仮に対応するにはどうしたらいいか

本格的な対応は後にするとして、仮に対応するケースで考えてみましょう。

body要素にbackground-colorを指定することで不自然な見た目は解消されます。ちなみに、body要素にbackground-imageを指定しても無視されます。
コンテンツ全体を囲む要素があれば、その部分に本来のコンテンツ背景色を入れるといいでしょう。

ただ、それでも不自然な見た目になることが多いと思われるので結局は本格的な対応が必要になるでしょう。

iPhone Xに本格的に対応しよう

iPhone Xに本格的に対応するにはどうしたらいいのでしょうか？
（現時点では）iPhone X対応のために専用のコードを記載する必要があります。

基本的なことはStephen Radford氏の技術ブログやWebkit Blogにも書かれていますが、実際にWebサイトでiPhone X対応をおこなう場合はもっと対応項目が多くなります。

はじめにHTMLの「meta name="viewport"」タグにCSS Round Display Level 1 の viewport-fitプロパティ（https://www.w3.org/TR/css-round-display-1/#viewport-fit-descriptor）を追加します。値は「cover」になります。

この指定を行うことで、iPhone XのSafariブラウザでセーフエリア以外にもコンテンツが表示されるようになります。

「meta name="viewport"」に「viewport-fit="cover"」を追加することでSafariブラウザで幅100%で表示されました。ただ、セーフエリア以外にコンテンツがかぶっていますので、このあと修正しましょう。

セーフエリア以外にコンテンツが指定されたら、画面サイズはどうなるの？

「meta name="viewport"」タグにCSS Round Display Level 1 の viewport-fitプロパティを指定したら、iPhone XのSafariブラウザでセーフエリア以外にもコンテンツが表示されるようになります。それでは、セーフエリア以外にコンテンツが指定されたら、画面サイズはどうなるのでしょうか？

ランドスケープモードでHTML要素のwidthの値をSafariのWebインスペクタで計測してみました。結果は以下のようになりました。

• Viewport Fitプロパティなしの場合、HTML要素のwidthの値が724px
• Viewport Fitプロパティありの場合、HTML要素のwidthの値が812px

当たり前の話ですが、画面の横幅が変わりますので注意しましょう。
また、ブレイクポイントを768pxで設定しているサイトが多いと思いますが、ユーザビリティテストを行ってきちんと操作できるか確認しましょう。

セーフエリアの領域はどれくらいあるの？

次に、セーフエリアがどれくらいあるのか、知っておく必要があります。テストページを用意してセーフエリアがどれくらいになるのか、試しに表示させてみました。背景色がグリーンの部分がセーフエリア以外の領域になります。

ポートレートモードの場合は、画面下部以外だけにセーフエリアが指定されています。
iPhone Xでは、高さが34px確保されています。

一方、ランドスケープモードでは、画面の左右と下部以外にセーフエリアが指定されています。 左右の幅が44pxずつ、下部の高さが21px確保されています。

ページ左右の横幅が812px、そこから88px（44px×2）を引くと724pxがコンテンツ表示領域になります。
ランドスケープモードでHTML要素のwidthの値をSafariのWebインスペクタで計測した値と一致します。

早い話が、iPhone Xのランドスケープモードでは、コンテンツの幅が724pxですが、メディアクエリでは812pxに含まれるものが読み込まれます。

CSSでの対応：safe-area-inset-（値）プロパティを指定

セーフエリアを理解したところで、セーフエリアを考慮してCSSを指定しましょう。
Viewport Fitプロパティの指定を追加しただけでは、「meta name="viewport"」タグにviewport-fitプロパティを指定しても、iPhoneのセーフエリアにコンテンツを表示させるだけになります。場合によってはコンテンツの閲覧に支障が出ます。

セーフエリアに対応して上下左右の位置を調整する必要があります。
セーフエリアを判別するCSSプロパティが、csswg-draftsにあります。

• safe-area-inset-top（上側のセーフエリアを指定）
• safe-area-inset-right（右側のセーフエリアを指定）
• safe-area-inset-left（左側のセーフエリアを指定）
• safe-area-inset-bottom（下側のセーフエリアを指定）

上記4つの指定をそれぞれCSSに追加する必要があります。

※本記事では上記4つをまとめて表示する場合、safe-area-inset-（値）プロパティとさせていただきます。

基本の調整

それでは、iPhone X向けに調整しましょう。
まず、左右の余白を調整する場合、小さい画面向けに今まで指定していた左右のpaddingに追記します。
今までは以下のように記載していたとしましょう。

以下のようにCSSを変更し、iPhone X向けのコードを追加します

CSS Calcを利用してsafe-area-inset-（値）プロパティと、従来のpaddingを足して表示するようにします。なお、safe-area-inset-（値）プロパティを指定しても、対応していないブラウザでは未知の値のため、無視してしまいます。@supportルールを利用しなくても問題ありません。なお、従来の記述もそのほかのブラウザのために残しましょう。

ページ下部の固定コンテンツの調整

続いては、ページ下部の固定コンテンツの調整を行います。

弊サイトでは、ページトップへのボタンを配置しています。
この部分も同じように、左右のセーフエリアだけでなく下のセーフエリアに配慮してコンテンツを配置します。

ここでは、固定配置かつページの下部に配置しているので、bottomプロパティとrightプロパティに同じようにセーフエリアを配置しています。

オフキャンバスの調整

最後にオフキャンバスの調整です。

弊サイトでは利用していませんが、クライアントさんのサイトでは、オフキャンバスを利用してサイトの右部分にオフキャンバスナビゲーションを表示しています。
実は、iPhone Xに対応する場合に一番難しいのは、左右にオフキャンバスを配置した場合の表示調整です。
なぜなら、湾曲している部分、カメラモジュールなどで出っ張っている部分にコンテンツを表示させることになるからです。

オフキャンバスコンテンツでは、カメラモジュールなどで出っ張っている部分にコンテンツを表示する可能性が高くなります。
一つ間違えると、上のキャプチャーみたいにナビゲーションの文字が読めなかったりすることがありえます。

そのため、セーフエリア以外の領域を考慮して左右の余白を大きくしました。
また、オフキャンバス要素のpadding-bottomを大きく設定して慣性スクロールなどに対応していましたが、今まで以上に大きい値を設定してあります。
これで、ひとまずはクリックできない、コンテンツを表示できないということはなくなります。

あと、オフキャンバスコンテンツを表示させるボタンを、デザイン的に右端に表示させていました。
しかし、セーフエリア指定に対応じて左右にずらすようにしました。

ここでは、オフキャンバスのボタンの余白をセーフエリア以外の領域も含めて表示させてしまう方法も検討しましたが、画面の向きによって左右の余白が違うのも戸惑うので、今回は採用していません。

モーダルコンテンツの調整

最後にモーダルを調整します。
こちらも左右と下部にセーフエリアを確保し入れます。ただ、モーダルの場合は、画面幅によっては対応が不要になる場合があります。

ポートレートモードにセーフエリアを確保する入れると、左右の表示領域が狭くなります。セーフエリアを入れる場合は、ページの下部だけにしておいて問題ないでしょう。

一方、ランドスケープモードでは、左右にセーフエリアを指定して入れていても、左右の表示領域に余裕があります。セーフエリアを入れる場合は、できればランドスケープモードのみ対応すればいいでしょう。

デザイン的な課題という名のまとめ

最後にデザインにおける課題をまとめとして書いておきます。

iPhone Xでは、デザイン的に今までのような作り方ができません。
従来と違い、コンテンツが「四角形」ではないからです。ページの上部にはセーフエリアのみ存在しますがありませんが、コンテンツをスクロールすると湾曲した部分があるため、それを考慮しなければいけません。

また、カメラモジュールなどで出っ張っている部分は、単にセーフエリアを指定してもカメラモジュールの位置を判定してくれるわけではありません。特に左右にオフキャンバスコンテンツを配置した場合、セーフエリア判定をしてもカメラの位置が判別できないために表現として微妙になることがあり得ます。

セーフエリア自体も、表現に課題が出てきます。幅100%コンテンツにborderを指定した場合、追加でborderの指定を追加しなければいけません。一例を挙げると、ボーダーで区切ったナビゲーションにセーフエリア対応をすると、セーフエリア以外にボーダーがないのでおかしいということが出てきます。

また、ページの両端にくっついて存在するボタンの場合にはセーフエリアの処理をどうするのかという問題もあります。セーフエリア以外を判別してそこで押せるようにしてしまうかどうかという処理もケースによっては必要かもしれません。

以上、iPhone Xのコンテンツにおける基本的な対応事例を解説しました。
実機がない（まだ発売されていないし）ので現時点での最適と思える対応事項を書いてみました。
こんな機種出されたら、買いたくなくても検証のために購入しないといけないので大変です...