env(safe-area-inset-*)失效主因是viewport-fit=cover缺失、写错或被构建工具删掉；必须确保meta标签完整、位置靠前且无语法错误，否则所有env()返回0px。
env(safe-area-inset-*) 在部分机型失效，90% 是因为 viewport-fit=cover 缺失、写错或被构建工具删掉，不是 CSS 本身的问题。
meta viewport 必须完整且位置靠前
iOS Safari 只有在解析到完整、无空格、未被覆盖的 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 时，才会注入 safe-area-inset-top 等值。漏掉 initial-scale=1.0、多一个空格、写成 viewport-fit: cover（冒号错误）、或被 Vite / Webpack 的 HTML 插件自动剔除，都会导致所有 env() 返回 0px。
验证方法：真机 Safari 打开 → 开发者工具 → 控制台运行：getComputedStyle(document.body).paddingTop。若返回空字符串或 "0px"，先查源码里 <meta> 是否真存在且格式正确。
注意：height=device-height 会干扰视口计算，必须删掉；viewport-fit=contain 或缺省值等同于禁用安全区上下文。
@supports 检测语法必须合法
@supports 不是检测函数是否存在，而是检测某条 CSS 声明是否被浏览器识别为合法。写错就等于整块规则被丢弃，fallback 也一并失效。
- ✅ 正确：
@supports (padding-bottom: env(safe-area-inset-bottom)) { .tabbar { padding-bottom: env(safe-area-inset-bottom); } } - ❌ 错误：
@supports (env(safe-area-inset-bottom)) { ... }（语法非法） - ❌ 错误：
@supports (safe-area-inset-bottom: 44px) { ... }（这不是 CSS 属性）
Android 和旧 WebView 会直接跳过整个 @supports 块，所以别指望它在那里触发 fallback —— fallback 必须无条件前置，比如先写 padding-bottom: 34px，再写 padding-bottom: env(...) 让支持的浏览器覆盖。
env() 不是标准属性，仅 WebKit 支持
env(safe-area-inset-bottom) 是 WebKit 私有特性，Android Chrome、Firefox、桌面版 Safari 全部不识别。它们不会报错，也不会 fallback，而是直接忽略整条声明 —— 连 getComputedStyle 都可能返回原始字符串 "env(safe-area-inset-bottom)"，而非计算后的像素值。
国产安卓机即使有刘海/挖孔，只要系统 WebView 没透传该值（如微信 X5、QQ 内核、某些厂商定制 ROM），env() 就恒为 0px 或无效。不能靠 UA 判断，只能真机实测。
更麻烦的是：有些设备（如 iPad mini 5、直屏安卓机）本就没有底部安全区，env(safe-area-inset-bottom) 返回 0px 是正常行为，不是 bug —— 别急着删代码，先确认是不是设备本身就不需要适配。
fixed 元素和 transform 容器会破坏 env() 计算
对 position: fixed 元素设 padding-bottom: env(safe-area-inset-bottom) 完全无效，因为 padding 不改变 fixed 元素的定位占位。正确做法是用 inset 或 bottom：
.tabbar { position: fixed; bottom: env(safe-area-inset-bottom); bottom: 34px; }
如果元素包裹在 transform 或 position: fixed 的父容器里，env() 的计算上下文会被截断 —— 必须把 padding-bottom 移到那个父容器上，而不是子元素自身。
另外，margin-bottom 会脱离文档流，导致滚动异常、高度塌陷或内容“掉出”可视区，务必用 padding-bottom 替代。
最容易被忽略的一点：env() 在键盘弹出、横竖屏切换等动态场景下不会自动更新，必须配合 JS 监听 resize 或 visualViewport 事件手动响应 —— 但后者在折叠屏上也不稳定，实际项目中往往得结合 class 切换 + 预设尺寸兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
