env(safe-area-inset-*) 必须配合 viewport-fit=cover 才生效，否则值恒为 0；仅 ios safari 支持且需 meta 完整声明，android chrome 及多数 webview 不支持；@supports 检测语法必须正确，fallback 推荐 20px/44px，fixed 元素需用 inset 或 bottom 而非 padding，calc() 中 env() 需带单位，js inline style 不解析 env()。
env(safe-area-inset-*) 必须配合 viewport-fit=cover 才生效
不加 viewport-fit=cover，env(safe-area-inset-top) 就是 0px——无论写多少遍都没用。iOS Safari 只在明确启用视口扩展时才注入这些变量。
检查你的 <meta name="viewport"> 是否完整包含：width=device-width, initial-scale=1.0, viewport-fit=cover。缺了 viewport-fit=cover 或被 JS 动态覆盖（比如某些 PWA 框架会重写 meta），env() 值永远为 0。
- Android Chrome（非 WebView）即使写了这句 meta，
env()依然不识别——别把它当跨平台方案 - 微信内置浏览器、旧版 QQ 浏览器等 WebView 多数不支持，不能靠 UA 判断，得实测
- 真机调试时，在 Safari 开发者工具的 Elements → Computed 中搜索
padding-top，看是否返回类似44px的值，而不是 fallback 的20px
@supports (padding-top: env(safe-area-inset-top)) 写法不能错
这个检测不是判断函数是否存在，而是验证“把 env() 当作某个 CSS 属性值是否合法”。语法错一个字符，整块规则就被浏览器忽略。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ✅ 正确：
@supports (padding-top: env(safe-area-inset-top)) { ... } - ❌ 错误：
@supports (env(safe-area-inset-top)) { ... }（env()不是属性） - ❌ 错误：
@supports (safe-area-inset-top: 44px) { ... }（这不是标准 CSS 属性） - fallback 值别设
0px，推荐20px或44px——直屏设备也适用，不会让导航栏紧贴状态栏被裁切
fixed 元素被遮挡？别只改父容器 padding
padding-bottom: env(safe-area-inset-bottom) 对 position: fixed 的底部按钮完全无效，因为 fixed 元素脱离文档流。真正起作用的是控制其定位偏移。
- 用
inset替代top/bottom：inset: auto 0 env(safe-area-inset-bottom) 0 - 或显式设置
bottom：bottom: env(safe-area-inset-bottom, 0px)（单位px不能省） - 如果用了
z-index，确保该元素层级高于系统 UI（如 Safari 地址栏），否则仍可能被盖住 - 避免在
height: 100vh容器内叠加padding-bottom——100vh本身已含刘海区域高度，再加 padding 会造成双倍留白
calc() 和 env() 混用时单位容易出错
env() 返回的是带单位的值（如 44px），不能裸奔进 calc() 运算。CSS 的 calc() 对单位极其敏感，括号嵌套或单位混用会导致解析失败。
- ❌ 错误：
height: calc(100vh - env(safe-area-inset-bottom))（缺少单位参与运算） - ✅ 正确：
height: calc(100vh - env(safe-area-inset-bottom, 0px)) - React/Vue 的 inline style 里写
style={{ paddingTop: 'env(safe-area-inset-top)' }}不生效——JS 层不解析 CSS 函数，env()必须出现在 CSS 样式表或<style></style>标签里 -
safe-area-inset-left和safe-area-inset-right目前 iPhone 全为 0，但 iPad Pro 横屏多任务时可能非零，别当成死值硬编码
实际适配中，最易被忽略的是：env() 值会随横竖屏、折叠、灵动岛展开等动态变化，它不是一次性配置就能一劳永逸的静态值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
