iPhone X の Safari で表示する Web ページの HTML / CSS 設定

どうやら、そのままだとサイトが表示領域の全体に面表示されないっぽい。

meta タグ Viewport に「viewport-fit=cover」を入れる。

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

このままだと問題があり、本体を横に傾けてランドスケープにするとコンテンツが両サイドまでいってしまい、四隅のアールやカメラ部分でコンテンツ内容が隠れてしまう。

アプリのように Safe Area があり、CSS で padding を設定すると余白をつけてくれる。

padding: 
constant(safe-area-inset-top) 
constant(safe-area-inset-right) 
constant(safe-area-inset-bottom)
constant(safe-area-inset-left);

ちなみに、constant(safe-area-inset-top) は margin など一部プロパティでも使用可能。

safe-area-inset を設定したタグに「width: 100%」や「height: 100%」を設定すると表示がうまくいかない可能性がある。

Apple Engine