viewport-fit=cover 必须加，否则 env(safe-area-inset-bottom) 返回 0；需配合 constant() 回退、fixed 元素用 bottom: env() 避开危险区，并用 @supports or 检测双函数。
viewport-fit=cover 必须加，否则 env() 返回 0
不加这个 meta 标签，env(safe-area-inset-bottom) 在 iOS Safari 和大部分 WebView 中会直接返回 0px，导致底部元素完全被遮挡。这不是兼容性问题，而是功能开关——它决定浏览器是否向 CSS 暴露安全区域变量。
正确写法是：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-
viewport-fit=cover是前提，没有它，后续所有 CSS 适配都无效 - 不要只写
width=device-width就以为够了 - 在 Hybrid App 的 WebView 中（如 WKWebView），同样需要显式设置该属性，否则默认为
contain
padding-bottom: env(safe-area-inset-bottom) 要配回退值
直接写 padding-bottom: env(safe-area-inset-bottom) 在旧版 iOS（11.0–11.1）或部分安卓 WebView 中会解析失败，导致样式丢失。必须提供降级方案。
推荐写法（双保险）：
body {<br> padding-bottom: constant(safe-area-inset-bottom);<br> padding-bottom: env(safe-area-inset-bottom);<br>}
-
constant()兼容 iOS 11.0–11.1；env()兼容 iOS 11.2+ 及现代浏览器 - 两个声明顺序不能反：后写的会覆盖前写的，所以
env()放在后面 - 回退值不是可选项——如果想支持老设备，就得同时写两行，不能只依赖
env()
fixed 定位的底部导航栏要避免用 bottom: 0
很多开发者习惯写 bottom: 0 + height: 50px，但这样会导致元素实际位置超出安全区下边界，哪怕加了 padding-bottom 也无济于事。
正确做法是用 top 或 inset 配合安全区变量控制布局范围：
.nav-bar {<br> position: fixed;<br> bottom: env(safe-area-inset-bottom); /* 把底边“抬高”到安全区起点 */<br> left: 0;<br> right: 0;<br> height: 50px;<br>}
- 关键点：不是给容器“留空”，而是让元素自身避开危险区
- 如果用
bottom: 0，再加padding-bottom，只是在容器内部撑开空白，fixed 元素仍锚定在视口最底部 - 更稳妥的写法是
inset: auto auto env(safe-area-inset-bottom) 0，语义更清晰
@supports 检测不能只看 env()，要带上 constant()
用 @supports 做渐进增强时，如果只写 @supports (padding-bottom: env(safe-area-inset-bottom))，iOS 11.1 会直接跳过整个区块——因为 constant() 不在检测范围内，但它才是当时唯一可用的方案。
安全的检测方式是：
@supports (padding-bottom: constant(safe-area-inset-bottom)) or<br> (padding-bottom: env(safe-area-inset-bottom)) {<br> .safe-area-aware {<br> --safe-bottom: constant(safe-area-inset-bottom);<br> --safe-bottom: env(safe-area-inset-bottom);<br> }<br>}
- 必须用
or连接两个函数，覆盖全量 iOS 11+ 场景 - 定义 CSS 变量时也要重复赋值，确保最终生效的是最新支持的那个
- 别指望 Android 浏览器返回非零值：目前主流安卓 WebView 对
safe-area-inset-*的支持仍基本为0，iOS 是主要适配目标
真正容易被忽略的，是 viewport-fit=cover 和 env() 的绑定关系——它不是“锦上添花”的优化，而是启用安全区能力的硬性开关。漏掉它，所有后续样式都是空中楼阁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
