Appleは22日、Safariで採用しているWebブラウザーエンジン「WebKit」の公式サイトで、iPhone X向けのWebサイトを制作するためのガイドライン「Designing Websites for iPhone X」を公開しました(9to5Mac)。 iPhone Xは、ノッチとも呼ばれている「センサーハウジング」を画面上部に持ち、また四隅のコーナーが丸みをおびているため、アプリだけなく、Webサイトをデザインする場合にも特別な配慮が必要となるようです。 特に水平方向に画面一杯のナビゲーションバーをサイトで注意が必要で、そのままだと上記画像のようにセーフエリアが左右に表示されてしまいますが、metaタグで"viewport-fit=cover"を指定することでこのエリアを無効化することができます。 ▲セーフエリアを無効化 ただしこのままだとコンテンツ部分がノッチで策されてしま
![iPhone X向けのWebサイトを制作するためのガイドライン「Designing Websites for iPhone X」が公開 | ソフトアンテナ](https://cdn-ak-scissors.b.st-hatena.com/image/square/04ca191a1268afd9cc66ffcbd60d94bb8a9237b9/height=288;version=1;width=512/https%3A%2F%2Fsoftantenna.com%2Fblog%2Fwp-content%2Fuploads%2F2017%2F09%2FIdefault-inset-behavior-1.jpg)