viewport-fit=cover 是 env() 生效的硬性前提，且 initial-scale=1.0 不可省略；@supports 必须写为 padding-top: env(safe-area-inset-top) 才有效；fixed 元素需用 bottom 或 inset 控制偏移；变量必须用 max(0px, env(...)) 安全兜底。
viewport-fit=cover 是 env() 生效的硬性前提
没这句 meta，env(safe-area-inset-top) 恒为 0px。必须写成：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，且不能被 JS 动态重写——PWA、uni-app 或微信 WebView 中常见该 meta 被覆盖，导致安全变量完全失效。
注意：initial-scale=1.0 不能省，iOS Safari 仅在此条件下才注入 env() 变量；viewport-fit=cover 还影响地址栏是否自动隐藏，而该行为会动态改变 env(safe-area-inset-top) 的值（比如从 44px 变为 0px）。
@supports 检测必须写对语法，否则整块规则静默失效
@supports (env(safe-area-inset-top)) 是非法语法，浏览器直接跳过整个 CSS 块。正确写法是把 env() 放进属性声明里：
@supports (padding-top: env(safe-area-inset-top)) {
:root {
--safe-top: max(0px, env(safe-area-inset-top, 0px));
--safe-bottom: max(0px, env(safe-area-inset-bottom, 0px));
}
}
这个检测不是查“函数是否存在”，而是查“该声明能否被解析执行”。一旦失败，fallback 才生效。别用 @supports (background: env()) ——某些旧版 Safari 对非布局属性支持不稳定。
fixed 元素被遮挡？别只改父容器 padding
padding-bottom: env(safe-area-inset-bottom) 对 position: fixed 的底部按钮完全无效，因为 fixed 元素脱离文档流。
- 正确做法是控制定位偏移：
inset: auto 0 env(safe-area-inset-bottom) 0或bottom: env(safe-area-inset-bottom, 0px)（单位不能省） - 如果用了
z-index，确保该元素层级高于系统 UI（如 Safari 地址栏），否则仍可能被盖住 - 避免在
height: 100vh容器内叠加padding-bottom——100vh本身已包含刘海区域高度，再加 padding 会造成双倍留白
统一变量定义必须用 max() 包一层，否则 calc() 静默崩坏
直接写 --safe-top: env(safe-area-inset-top, 0px) 很危险：不支持的环境里变量值为 unset，后续所有依赖它的 calc() 都会静默失效（比如 calc(100vh - var(--safe-top)) 直接退化为 100vh）。
安全写法是用 max() 提供兜底：
:root {
--safe-top: max(0px, env(safe-area-inset-top, 0px));
--safe-bottom: max(0px, env(safe-area-inset-bottom, 0px));
}
header { padding-top: var(--safe-top); }
.tabbar { padding-bottom: var(--safe-bottom); }
Android Chrome（非 WebView）基本不识别 viewport-fit=cover，也就不提供这些变量；env() 本质是 WebKit 特性，别把它当跨平台方案用——真要兼容安卓，得靠 UA 判断 + 固定 fallback（如 44px / 34px）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
