viewport-fit=cover缺失会导致env()全为0px；必须在meta中正确设置viewport-fit=cover，@supports需检测完整CSS声明，fixed元素应使用inset而非padding避开安全区，且须提供fallback值。
viewport-fit=cover 缺失会导致 env() 全为 0px
env(safe-area-inset-top) 这类变量不是“浏览器支持就自动有值”，而是依赖 viewport-fit=cover 这个开关真正启用。iOS Safari 默认是 viewport-fit=contain，不加这个参数，所有 env() 都返回 0px —— 不是 bug，是功能没开。
常见翻车点：
-
里漏掉viewport-fit=cover - 写成
viewport-fit: cover（冒号错误，必须是等号） - Vite / Webpack 插件自动 strip 掉了含
viewport-fit的 meta 标签 - 加了
height=device-height，干扰视口计算，间接让 env() 失效
验证方式：真机 Safari 开发者工具中运行 getComputedStyle(document.body).paddingBottom，若返回 "0px" 或空字符串，先查源码里 是否完整、无空格、无拼写错误。
@supports 检测必须语法合法，否则整块规则被丢弃
@supports 不是检测函数是否存在，而是检测某条 CSS 声明是否能被浏览器识别为合法语法。写错就等于没写，浏览器直接跳过整段样式。
正确写法示例：
/* ✅ 合法：声明完整，属性+值结构正确 */<br>@supports (padding-top: env(safe-area-inset-top)) {<br> .header { padding-top: env(safe-area-inset-top); }<br>}
错误写法：
-
@supports (env(safe-area-inset-top)) { ... }→ 语法非法，括号内不是完整声明 -
@supports (safe-area-inset-top: 44px) { ... }→ 这不是标准 CSS 属性，不合法
更稳妥的替代方案：@supports (-webkit-touch-callout: none) 判断 WebKit 环境，再包裹 env() 使用——比直接检测 env() 更可靠。
fixed 元素必须用 bottom/inset，不能靠 padding-bottom 避开底部安全区
对 position: fixed 元素（如底部 TabBar），padding-bottom 是内容内部空间，完全不影响它的定位框。加了也白加，内容照样被 Home Indicator 遮住。
正确做法是改用定位偏移：
- ❌ 错误：
.tabbar { position: fixed; bottom: 0; padding-bottom: env(safe-area-inset-bottom); } - ✅ 正确：
.tabbar { position: fixed; bottom: env(safe-area-inset-bottom); left: 0; right: 0; } - ✅ 更清晰（兼容性更好）：
.tabbar { position: fixed; inset: auto env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
注意：inset 是 top/right/bottom/left 的简写，但需确保浏览器支持（Safari 14.5+、Chrome 89+），老版本仍建议拆开写。
务必提供 fallback 值，且声明顺序不能反
env(safe-area-inset-bottom) 不是独立 CSS 属性，它只是 env() 函数的参数。如果浏览器不支持或 env() 返回无效值，整个声明会被丢弃——没有 fallback 就等于没写。
正确顺序（从上到下生效）：
.footer {<br> padding-bottom: 20px;<br> padding-bottom: env(safe-area-inset-bottom, 20px);<br>}
关键点：
- fallback 值必须写在前一行，CSS 会按顺序覆盖；反过来（
env()在前）会导致不支持时直接失效 - 推荐用
calc(16px + env(safe-area-inset-bottom, 0px))，兼顾基础间距与动态增量 - 不要对
body直接设env()padding，它会影响全局布局，难以局部控制 - Android WebView 和微信/QQ 内置浏览器多数不支持
env()，真机测试不可省略
最易被忽略的是：env() 变量无法通过 JS 的 getComputedStyle 读取运行时值，返回的只是字面量字符串或空值。需要 JS 响应时，得靠 visualViewport 或自定义属性中转，但这已是另一层问题了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
