本文へ移動

§17-06Mobile

Safe area insets 対応

ノッチやホームバーに内容が隠れないよう余白を取る。

画面の切り欠きやホームバーに内容が重ならないよう余白を確保する。全画面表示や下部固定の操作があるモバイル画面で必須になる。

実装のポイント

viewport メタに viewport-fit=cover を指定し、padding に env(safe-area-inset-top) などを加える。max() で通常の余白と比べると全端末で崩れない。

特徴
  • CSS のみ
デモで使っているもの
  • shadcn/ui