【HTML/CSS】スマートフォンのセーフエリアの対応方法

はじめに

PWAで"display": "standalone"とした場合に、画面下端に配置したボタンとホームバーが重なってしまうことがあります。

これを改善する方法について記載します。

ビューポートのメタ値を追加する

HTMLのメタタグにviewport-fit=coverを追加します。

<meta name="viewport" content="viewport-fit=cover" />

CSSで余白を追加する

余白が必要な要素に以下を設定します。

.sample {
  padding-bottom: env(safe-area-inset-bottom);
}

すると以下のようにボタンの下に適切な余白ができます。

画面を横向きにした際にアイコンなどがノッチに重なるのを避けるには以下のようにします。

.sample {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

参考