必要な場合だけedge-to-edgeを有効化
画面端まで背景を伸ばす必要がある場合にviewport-fit=coverを使います。
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">デザイン余白と安全余白を組み合わせる
max()で本来の最小paddingを維持し、必要な場合だけ大きいsafe-areaを採用します。
.bottom-actions {
padding-bottom: max(16px, env(safe-area-inset-bottom));
}優先して確認する部品
- 固定ヘッダーと戻るボタン
- 下部CTAとタブバー
- 全画面メディアと地図
- 横向きの左右操作
QA中は境界を可視化
半透明色や破線でinsetを表示し、縦向きと横向きを確認します。デバッグ表示だけを最後に外します。