CodeCode

なんか色々おぼえ書き。だいたいweb制作関連。

iPhone X SafariのLandscapeモード対応

1月20日に行われた「さくらの夕べ in すごい広島」で『webサイトのiPhone X対応』についてLTしてきました。

iPhone XのSafariでwebページをLandscapeモードでみると、左右に余白ができています。

iPhone X Landscapeモード未対応の場合左右に余白ができる

この余白はiPhone Xの操作エリアでそのエリアにボタン等操作するコンテンツを置くべきではないとされています。

ですが、このままでは左右に余白が出ていてかっこ悪いのでiPhone XのLandscapeモードに対応させて行きます。

Viewport

左右の余白に対応するためにViewportviewport-fit=coverという値が実装されました。

<meta name="viewport" content="viewport-fit=cover">

iPhone X Landscapeモード対応でフルスクリーン

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);

constant()env()はiOS Safariで独自に実装されたもので、iOS11でconstant()を、iOS11.2からはconstant()が削除されenv()が実装されました。

まとめ

以上2つを書くことで簡単にiPhone Xに対応することができます。

ただ、iPhone Xが発売されたのが11月3日、iOS 11.2がリリースされたのが12月2日なので、当面はconstant()とenv()と両方書かなければなりません。

記事一覧