先啟用延伸至屏幕边緣
在需要 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。