iPhoneXのUAと出っ張り対応メモ。レスポンシブサイトは要注意。

PhoneⅩは縦横比19.5:9と超縦長。
しかも変な出っ張りがある。
サイトの注意点と改修方法をメモ。

iPhoneⅩは、カメラやセンサー部分の出っ張りがあります。
デフォルトの設定では、WEBサイトの表示がこの出っ張りに隠れないように余白ができます。

i

余白部分はbody要素のbackground-colorで設定できます。
もしbackground-colorの設定がなければ、transparentになります。
一般的なウェブブラウザは背景色が白になっているので、白になります。

※ごく一部のブラウザや、アプリ内にサイトを表示する場合は、全体の背景色が白ではなくグレー等で表示されることがあります。
iPhoneⅩに関係なく、bodyのbackground-colorは白（#fff）を指定しておいたほうがいいです。

もし、サイト内の背景色が1色で、横幅いっぱいで違う背景色を使ったエリアがないのであれば、bodyのbackgound-colorだけで解決します。
ですがそのようなサイトは、あまりないでしょう。

余白が気に入らないのであれば、viewportにviewport-fit=coverをつけることで、端末いっぱいに表示されるようになります。

viewport-fit=cover

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

これだけで、横幅一杯に表示されるようになります。
ですが、当然出っ張りに隠れてしまうコンテンツが出てきます。

その場合は、各コンテンツのCSSを調整します。

safe-area-inset-top
safe-area-inset-right
safe-area-inset-left
safe-area-inset-bottom

というCSSの値が使えます。
例えば、headerに余白を持たせるなら

CSSで調整

header {
  padding-rihgt: safe-area-inset-right;
  padding-left: safe-area-inset-left;
}

のようにすることで、出っ張りの内側に表示されます。 出っ張りをピクセル指定しなくてもOKです。

absoluteのコンテンツであれば、例えば

CSSで調整 absolute

header {
  position: absolute;
  right: 10px;
 rihgt: safe-area-inset-right;
}

これで大丈夫。
rightが2回設定されていますが、「 safe-area-inset」が関係ないときはその上の設定が適用されます。