viewport-fit=cover是启用env()安全区变量的前提，缺失时iOS Safari中env(safe-area-inset-*)恒为0px；必须在meta viewport中显式声明且不可动态插入，需配合fallback值或env(var, fallback)语法及@supports检测确保兼容性。
viewport-fit=cover 是前提，缺了它 env() 全是 0px
不加 viewport-fit=cover，env(safe-area-inset-top) 这类值在 iOS Safari 里永远解析为 0px，不是“没生效”，而是根本没暴露。很多开发者写了 CSS 却发现底部 TabBar 还是被 Home Indicator 挡住，第一反应是代码写错，其实只是 <meta name="viewport"> 缺了这个关键参数。
必须确保页面有且仅有一条正确的声明：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
注意几点：
-
initial-scale=1.0不能省——iOS 要求视口缩放明确，否则禁用env() - 不要用 JS 动态插入或覆盖这条 meta，Safari 在解析 HTML 阶段就决定是否启用安全区变量
- 微信内置 WebView（尤其旧版）可能忽略
viewport-fit，真机测试不可替代
必须逐边设置，不能写 padding: env(safe-area-inset-bottom)
safe-area-inset-top、safe-area-inset-bottom 等是四个独立环境变量，不是一组可批量读取的值。写 padding: env(safe-area-inset-bottom) 会因语法错误被浏览器直接丢弃整条声明，fallback 也失效。
正确做法是按方向分别设置盒模型属性：
- 顶部状态栏避让：
padding-top: 20px; padding-top: env(safe-area-inset-top); - 底部 Home Indicator / 动态岛避让：
padding-bottom: 34px; padding-bottom: env(safe-area-inset-bottom); - 左右圆角区域（虽多数为 0，但需显式兼容）：
padding-left: 0; padding-left: env(safe-area-inset-left);
顺序很重要：fallback 值写在前，env() 写在后，靠层叠覆盖生效。
fallback 不只是“兼容老设备”，更是防解析失败的兜底
不写 fallback 的后果不是“只在旧系统失效”，而是在不支持 env() 的环境（如部分安卓 WebView、桌面 Chrome 模拟器）中，整条 CSS 声明被当作无效值丢弃，导致元素紧贴边缘、内容被遮挡。
更稳妥的写法是带默认值的 env() 语法：
-
padding-bottom: env(safe-area-inset-bottom, 34px);—— 如果变量未定义，直接取34px - 比分开写两行更简洁，且避免因 CSS 优先级或加载顺序引发的意外覆盖
- 注意：这个 fallback 仅对
env()函数本身有效，不替代传统 fallback 行（如仍需兼容极老 iOS，保留双写更保险）
安卓和桌面浏览器支持不稳定，别信“已广泛支持”这种说法
Chrome 桌面版即使开启设备模拟，env(safe-area-inset-bottom) 也返回 0px；部分安卓厂商 WebView（如华为 EMUI 内置浏览器、旧版微信 X5）压根不实现该函数，查 getComputedStyle 会得到空字符串或 0px。
推荐用 @supports 做最小化检测：
@supports (padding: env(safe-area-inset-top)) {<br> body {<br> padding-top: env(safe-area-inset-top, 20px);<br> padding-bottom: env(safe-area-inset-bottom, 34px);<br> }<br>}
这样既避免污染不支持环境的样式，又不用引入 JS 判断——毕竟安全区适配本就是纯 CSS 层的事，加 JS 反而增加首屏阻塞和逻辑复杂度。
真正容易被忽略的是：这些值在非刘海设备（如 iPhone 8）上也存在，只是恒为 0px，所以 fallback 值不会破坏常规布局，但也不能假设“没刘海就不用设”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
