env()需配合viewport-fit=cover生效，且必须写width=device-width和initial-scale=1.0；@supports须用padding-top: env()语法检测；fallback值不可省，env()仅返回长度值须配合calc()使用；fixed元素需用inset或bottom控制偏移。
env() 必须配合 viewport-fit=cover 才生效
不加这句 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，env(safe-area-inset-bottom) 在 iOS 上永远返回 0px——不是 fallback 失效，而是函数压根不被注入。漏掉 width=device-width 或 initial-scale=1.0 都可能导致 WebView 回退到 viewport-fit=auto，结果一样是 0。
微信内置浏览器（8.0.22 之前）、部分企业微信 WebView 会忽略该声明，建议用 JS 实时检查：document.querySelector('meta[name="viewport"]').content 是否真包含 viewport-fit=cover。
@supports 检测必须写对语法，否则整块规则被跳过
@supports (env(safe-area-inset-top)) 是非法写法，浏览器直接丢弃整条 @supports 块。正确方式是把 env() 放进属性声明里检测：
@supports (padding-top: env(safe-area-inset-top)) {
header { padding-top: env(safe-area-inset-top); }
}
fallback 值不能省，比如写成 padding-top: 20px; padding-top: env(safe-area-inset-top);。注意顺序：先 fallback，再 env()，靠 CSS 层叠覆盖；反过来写，旧设备就彻底没留白。
立即学习“前端免费学习笔记（深入）”；
别把 env() 当颜色或尺寸直接用，它只返回长度值
background-color: env(safe-area-inset-top) 完全无效——env() 返回的是 44px 这类长度，不是颜色值。它的作用是参与计算，必须套 calc()：
padding-top: calc(env(safe-area-inset-top) + 8px)-
inset: auto 0 env(safe-area-inset-bottom) 0（用于position: fixed底部按钮） -
bottom: env(safe-area-inset-bottom, 0px)（注意单位不能省，0不合法）
Android Chrome（非 WebView）完全不支持 env()，Pixel、三星 One UI 3.1+ 的部分 WebView 可能有值，但不能当作兼容依据。
fixed 元素被遮挡？别只改父容器 padding
padding-bottom: env(safe-area-inset-bottom) 对 position: fixed 的底部 tabbar 完全无效，因为 fixed 元素脱离文档流。真正起效的是控制其定位偏移：
- 用
inset：inset: auto 0 env(safe-area-inset-bottom) 0 - 或显式设
bottom：bottom: env(safe-area-inset-bottom) - 若用了
z-index，确保该元素层级高于系统 UI（如 Safari 地址栏），否则仍可能被盖住
另外，env() 值在折叠屏、横竖屏切换时会动态变化，不能当静态常量记死；iOS 上 safe-area-inset-left 和 safe-area-inset-right 目前 iPhone 全为 0，但 iPad Pro 横屏多任务时可能非零——这点容易被忽略。
