Apple Engine

Apple, iPhone, iOS, その周辺のことについて

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

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

参照元
ayogo.com

 

対処方法

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%」を設定すると表示がうまくいかない可能性がある。

スポンサーリンク