今日、SafariのWebブラウザエンジンであるWebKitのチームは、デザイナーがiPhone Xのサイトを構築する方法を詳細に説明しています。今後のiPhoneのセンサーハウジング「ノッチ」は、デザイナーと開発者にとって新たな課題を提示しています。そこには、問題のためのいくつかの創造的な “解決策”を示しています。 WebKitをiPhone Xの公式なガイドラインにすることは、世界中のWeb開発者に役立つはずです。
iPhone Xのセンサーハウジングは、現状のウェブサイトの設計上の課題を提示します。アップルはサイトのコンテンツを片側に埋め込むことで早期にこの問題を緩和しようとしています。 フルサイズのコンテンツを持つサイトの場合、この緩和策はAppleの意図よりも魅力的ではありません。多くのWeb開発者は、今後予定されているiPhone Xでできるだけ上手く見えるようにサイトを少し微調整しているかもしれません。iPhone Xの設計に関するWebKitのチームポストでは、開発者ができることの前後の例が提供されています。
今日のドキュメンテーションは、Stephen Radfordが以前にCSSで解剖したものと似ています。 WebKitのブログでは、開発者はまず、iPhone Xのフルサイズを横向きに活用する必要があると説明しています。そのためには、サイトのメタタグにviewport-fit = coverを実装する必要があります。それがなければ、サイトは伸びず、ディスプレイの全幅を使い奇妙に見えることがあります。
ビューポートが調整されると、コンテンツがセンサハウジングと家庭用インジケータの下に隠れて表示されることがあります。 Appleの次のステップはiPhone Xの安全な領域を説明することだと述べています。安全な領域を考慮することで、ウェブ開発者は、コンテンツがセンサハウジング、家庭用インジケータ、または丸みのある角によって隠されないことを確認することができます。
これはデザイナーの要点です。ベゼルレス設計のため、iPhone Xはベゼルをソフトウェアに再導入するだけです。
アップルのiPhone用デザインサイトから：
これを実現するために、iOS 11のWebKitには、新しいCSS関数、constant（）、および4つの事前定義された定数のセット、safe-area-inset-left、safe-area-inset-right、safe-area-inset-トップ、およびセーフエリアインセットボトムこれらを組み合わせると、スタイル宣言で各側のセーフエリアインセットの現在のサイズを参照できます。
この2つの変更だけで、Web開発者は新しいiPhone Xでサイトをできるだけよく見せるようにサイトを適応させることができます。奇妙なことに、Appleはmin（）関数とmax（）関数についても言及しています。どちらもCSSには比較的新しいものですが、Safari 11またはiOS 11ではどちらも利用できません（AppleはSafari Technology Previewの将来のバージョンで利用可能とすると述べています）。
