viewport-fit=cover是env()生效的必要前提，缺则env()恒为0px；必须与width=device-width、initial-scale=1.0共存，且需在中静态声明，js动态插入无效。
viewport-fit=cover 不加，env() 就是废的
只写 padding-bottom: env(safe-area-inset-bottom) 没用，WebKit 根本不注入环境变量——env() 会恒为 0px。必须在 <meta name="viewport"> 中显式声明 viewport-fit=cover，且不能缺任何基础项：width=device-width 和 initial-scale=1 缺一不可。
常见失效场景：
- 微信 8.0.22 之前版本不支持
viewport-fit，env()直接不解析 - 企业微信或某些自研 Hybrid 容器会劫持并覆盖
<meta>，需在 DevTools Elements 面板里手动确认最终渲染出的content值 -
viewport-fit=cover必须出现在中，JS 动态插入无效
PostCSS 插件要选对，别被 calc() 坑了
想用 calc(8px + env(safe-area-inset-bottom)) 加间距？Safari 15.4 之前整条规则会被丢弃。PostCSS 插件如 postcss-env-fallback 或 postcss-safe-area 可帮你自动降级，但前提是配置得当：
- 优先启用
postcss-safe-area（它会把env()规则拆成两条：先写padding-bottom: 8px，再覆盖padding-bottom: calc(8px + env(safe-area-inset-bottom))） - 禁用
postcss-csso或类似压缩插件对calc()的过度优化，它们可能删掉“冗余”括号导致 Safari 解析失败 -
env()不支持乘除，calc(env(safe-area-inset-bottom) * 2)在所有版本 Safari 中都会被忽略
padding-bottom 是唯一靠谱的落点，别碰 margin-bottom 或 bottom
对 position: fixed; bottom: 0 的底部栏，直接在该元素上设 padding-bottom: env(safe-area-inset-bottom)；对 flex 布局中靠 margin-top: auto 推下来的底部区域，要把 padding-bottom 加在父容器上。
千万别这么做：
- 给
或加padding-bottom—— 整页下移，顶部状态栏区域可能露白或错位 - 用
bottom: env(safe-area-inset-bottom)替代padding-bottom—— 元素被下推，但容器高度没变，内容仍可能被黑条截断 - 对脱离文档流的元素用
margin-bottom—— 完全无效
BEM 类名必须原样存在，否则 PostCSS 白配
Hybrid 容器常注入全局样式（比如宿主写的 .text { color: #666 !important }），一旦你用 scoped 或 cssModules，BEM 类名被编译成 .user-card__title[data-v-abc123] 或哈希值，就彻底失去隔离能力——PostCSS 处理完的 env() 规则，匹配不到真实 DOM 元素。
验证方式很简单：打开 WebView 控制台，在 Elements 面板里检查 class 属性是否为原始字符串 user-card__title，而不是空值、驼峰、或带 data- 属性的变体。uni-app 项目务必关掉 scoped，Taro 项目禁用 cssModules。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
