env(safe-area-inset-*) 非零需 viewport-fit=cover 开启，缺失或错误将导致全为0px；@supports 必须语法合法才生效；fixed 元素须用 bottom/inset 而非 padding 避开安全区；务必提供 fallback 值并注意声明顺序。
env(safe-area-inset-*) 必须搭配 viewport-fit=cover 才能非零，否则永远是 0px —— 不是兼容性问题，是功能开关没打开。
viewport-fit=cover 缺失或写错是最常见失效原因
iOS Safari 只有在 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 完整存在且无空格、无拼写错误时，才会注入 env(safe-area-inset-top) 等值。漏掉 initial-scale=1.0、写成 viewport-fit=contain、被构建工具（如 Vite 的 html 插件）自动删掉，都会导致所有 env() 返回 0px。
验证方法：真机 Safari 开发者工具控制台运行 getComputedStyle(document.body).getPropertyValue('padding-bottom') —— 若返回 "0px" 或空字符串，先查源码里 <meta> 是否真包含 viewport-fit=cover。
- 别写
height=device-height，它会干扰视口计算，让env()失效 - 微信、QQ 等 WebView 即使写了
viewport-fit=cover也可能不支持env()，必须真机测试，不能靠 UA 判断 - Hybrid App 的 WKWebView 同样需要显式设置该 meta，否则默认为
contain
@supports 检测必须语法合法，否则整块规则被丢弃
@supports 不是检测函数是否存在，而是检测某条 CSS 声明是否被浏览器识别为合法。写错就等于没写。
- ✅ 正确：
@supports (padding-top: env(safe-area-inset-top)) { .header { padding-top: env(safe-area-inset-top); } } - ❌ 错误：
@supports (env(safe-area-inset-top)) { ... }（语法非法，整块被忽略） - ❌ 错误：
@supports (safe-area-inset-top: 44px) { ... }（这不是 CSS 属性）
更稳妥的写法是用 @supports (-webkit-touch-callout: none) 判断 WebKit 环境，再包裹 env() 使用 —— 这比直接检测 env() 更可靠。
fixed 元素不能靠 padding-bottom 避开底部安全区
position: fixed 元素贴着视口底部时，padding-bottom 是内容内部空间，完全不影响它的定位。必须改用 bottom 或 inset 偏移。
- ❌ 错误：
.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 auto env(safe-area-inset-bottom) 0; }
如果需要固定栏离底边留出净间距（比如 8px），不要写 bottom: calc(8px + env(safe-area-inset-bottom)) —— Safari 15.4 之前不支持单位混合运算，整条声明会被丢弃。应先设 env()，再用子元素内边距或 margin 控制净间距。
env() 必须配合 fallback 和 calc() 或 max() 才真正安全
单独写 padding-bottom: env(safe-area-inset-bottom) 在不支持环境里整条声明被丢弃，退回到上一个有效值（可能为 0）；而 calc(16px + env(safe-area-inset-bottom)) 即使 env() 失效，也能算出 16px，保证底线不塌。
- 推荐组合：
padding-bottom: 16px; padding-bottom: env(safe-area-inset-bottom); padding-bottom: max(16px, env(safe-area-inset-bottom)); - 顺序很重要：fallback 值写在前面，
env()写在后面，CSS 自然覆盖 - 老 iOS（11.0–11.1）需兼容
constant()：padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);，且constant()必须在前 - 安卓 Chrome、Firefox、Edge 等不支持该变量，会忽略或回退为 0 —— 不要依赖它做关键布局
真正容易被忽略的是：env() 只在视口尺寸变化时更新，但 iOS 在横竖屏切换、分屏多任务等场景下，env(safe-area-inset-bottom) 可能突变，而 CSS 不会自动重计算。如有动态适配需求，得监听 resize 并用 JS 触发一次强制重绘（例如切换 class 名）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
