§17-06Mobile
Safe area insets 対応
ノッチやホームバーに内容が隠れないよう余白を取る。
画面の切り欠きやホームバーに内容が重ならないよう余白を確保する。全画面表示や下部固定の操作があるモバイル画面で必須になる。
実装のポイント
viewport メタに viewport-fit=cover を指定し、padding に env(safe-area-inset-top) などを加える。max() で通常の余白と比べると全端末で崩れない。
- 特徴
- CSS のみ
- デモで使っているもの
- shadcn/ui