本日、WebKitがiPhone X向けにWebサイトを構築する公式ガイドラインを公開しました。
iPhone Xは上部に切り込みが入ったディスプレイが特徴となっており、デベロッパー泣かせにも程がある、ある意味カオスなディスプレイ設計となっていますが、そのカオスさをWeb開発者も享受できることがわかりました。（誰もしたくない）
基本的にiPhone Xでは下記画像のように、デフォルトインセットで上部切り込み部分と下部にコンテンツが表示されないようになっていますが、ワイドレイアウトが主流となった現在、このデザインはあまり好まれそうにありません。
が、これを単純に回避しようとして、フルスクリーン指定をした際には事故が起こります。↓
見事にコンテンツが切り込み部分に被ってしまっています。それに、iPhone X特有のホームボタン代わりの下部のバーにもコンテンツが被っています。
これを回避するために、左右と下部にスペースを空ける必要があります。
詳しくは公式ガイドラインを見ていただくとして、新しいCSS関数、constant（）、safe-area-inset-left、safe-area-inset-right、safe-area-inset-top、safe-area-inset-bottom を組み合わせると、下記のようなデザインにすることができるとのこと。
正直、1機種のためにここまでする必要があるのであれば、デフォルトプリセットのままで良い。
と言う開発者の方が多そうですが、やってみようかな。と思った方は、是非挑戦してみてはいかがでしょうか。
筆者も、少しだけWeb開発を行いますが、正直やりたくない。です。
今後、Androidも似たようなデザインの機種を投入しだすと、さらに面倒なことになるため、今後の展開を考えるとゾッとします…。
Via: 9to5Mac
