1月20日に行われた「さくらの夕べ in すごい広島」で『webサイトのiPhone X対応』についてLTしてきました。
iPhone XのSafariでwebページをLandscapeモードでみると、左右に余白ができています。
この余白はiPhone Xの操作エリアでそのエリアにボタン等操作するコンテンツを置くべきではないとされています。
ですが、このままでは左右に余白が出ていてかっこ悪いのでiPhone XのLandscapeモードに対応させて行きます。
Viewport
左右の余白に対応するためにViewportにviewport-fit=coverという値が実装されました。
<meta name="viewport" content="viewport-fit=cover">
Viewportにviewport-fit=coverを実装することで、Safariの表示をフルスクリーンに設定できます。
フルスクリーンでの余白
ただフルスクリーンにしただけでは、メニューボタンやテキストなどが操作エリアにかかってしまう場合があります。 それを回避する変数も実装されています。
iOS 11.1以下の場合
padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);iOS 11.2以上の場合
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);まとめ
以上2つを書くことで簡単にiPhone Xに対応することができます。
ただ、iPhone Xが発売されたのが11月3日、iOS 11.2がリリースされたのが12月2日なので、当面はconstant()とenv()と両方書かなければなりません。