先啟用延伸至螢幕邊緣
在需要 edge-to-edge 的頁面加入 viewport-fit=cover，再由 CSS env() 讀取四邊安全距離。普通非全螢幕頁面不一定需要強行啟用。
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">讓設計間距和安全距離合作
不要用安全距離完全取代原有 padding；可用 max() 保留設計的最小空間。
.bottom-actions {
padding-bottom: max(16px, env(safe-area-inset-bottom));
}哪些元件最需要檢查
- 固定頂部導覽和返回按鈕
- 底部 CTA、Tab bar 及播放器
- 全屏圖片、地圖及影片控制
- 橫向模式的左右操作區
測試時顯示安全區邊界
在開發及 QA 階段以半透明背景或虛線標示 inset，分別測試直向和橫向。完成後移除視覺標記，但保留自動 padding。