env(safe-area-inset-*) 不生效主因是 viewport-fit=cover 缺失或写错，需确保 meta 标签完整包含 width=device-width, initial-scale=1.0, viewport-fit=cover，且无空格或被构建工具误删；@supports 必须语法合法，如 @supports (padding-top: env(safe-area-inset-top))；fixed 元素需用 top/bottom 偏移而非 padding；constant() 必须写在 env() 前以兼容老设备；env() 在键盘弹出等动态场景下不更新，需 JS 配合监听 resize 事件。
env(safe-area-inset-*) 不生效，90% 是因为 viewport-fit=cover 缺失或写错，不是 CSS 写得不对。
viewport-fit=cover 必须完整写对，且不能被覆盖
iOS Safari 只有在 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 完整存在时，才会注入 safe-area-inset-top 等值。缺 initial-scale=1.0、多空格、被构建工具（如 Vite 的 html 插件）删掉，都会导致所有 env() 返回 0px。
检查方法：打开真机 Safari 开发者工具 → 控制台运行：getComputedStyle(document.body).getPropertyValue('padding-top') —— 如果返回空字符串或 "0px"，先查 meta 标签源码是否真包含 viewport-fit=cover。
- 别写
height=device-height，它会干扰视口计算，让env()失效 - 微信、QQ 浏览器等 WebView 即使写了
viewport-fit=cover也可能不支持env()，必须真机测试，不能靠 UA 判断
@supports 检测必须语法合法，否则整块规则被丢弃
@supports 不是检测函数是否存在，而是检测某条 CSS 声明是否被浏览器识别为合法。写错就等于没写。
立即学习“前端免费学习笔记（深入）”；
✅ 正确写法：@supports (padding-top: env(safe-area-inset-top)) { .header { padding-top: env(safe-area-inset-top); } }
❌ 错误写法：@supports (env(safe-area-inset-top)) { ... }（语法非法，整个块被忽略）@supports (safe-area-inset-top: 44px) { ... }（这不是 CSS 属性）
- 降级顺序要严格：
padding-top: constant(safe-area-inset-top);必须写在env()前面，iOS 11.0–11.1 才能 fallback -
constant()已废弃，但老设备仍依赖它；env()在 iOS 11.2+ 才真正稳定
fixed 元素被刘海遮住？padding-top 不起作用
position: fixed 元素贴着视口顶部时，padding-top 是内容内部空间，完全不影响它的位置。必须改 top 偏移。
正确写法：
top: 0;<br>top: constant(safe-area-inset-top);<br>top: env(safe-area-inset-top);
- 顺序不能反：
constant()必须在env()前，否则老设备直接跳过 - 别在 React/Vue 的
style={{ top: 'env(safe-area-inset-top)' }}里硬塞——JS 不解析 CSS 函数，只会透传字符串，浏览器不认 - 如果头部有背景色或阴影，注意
env(safe-area-inset-top)在非刘海设备上是0px，别因此多出意外空白
底部 Home Indicator 遮挡按钮？padding-bottom 同样无效
和顶部一样，position: fixed; bottom: 0 的 TabBar 或按钮，加 padding-bottom 对它完全没用。
必须用定位偏移：
bottom: 0;<br>bottom: constant(safe-area-inset-bottom);<br>bottom: env(safe-area-inset-bottom);
-
safe-area-inset-bottom在全面屏 iPhone 上通常是34px，但横屏、软键盘弹出时不会自动更新——这是 iOS Safari 的已知限制，CSS 无解 - 想响应键盘弹出？只能监听
resize事件 + JS 强制重绘（例如切换 class 触发重排） - fallback 值别设
0，推荐20px或34px，直屏设备也适用
最常被忽略的是：env() 值只在视口尺寸变化（比如旋转）时更新，软键盘弹出、灵动岛展开等动态场景下，它不会变。这时候光靠 CSS 就不够了。
