env(safe-area-inset-top)在iPhone上生效必须同时满足viewport-fit=cover、@supports语法正确检测、且不被JS动态覆盖三个条件；缺一即返回0px，非兼容性问题而是机制限制。
env(safe-area-inset-top) 在 iPhone 上不是“写了就能用”，必须同时满足 viewport-fit=cover、@supports 检测正确、且不被 JS 覆盖这三个硬性条件，缺一不可。
viewport-fit=cover 是 env() 生效的唯一开关
没有这句 ，env(safe-area-inset-top) 在 iOS Safari 中永远返回 0px。这不是兼容性问题，是机制限制：iOS 只在明确启用视口扩展时才注入这些变量。
常见踩坑点：
- PWA 或全屏 WebView 场景下，JS 动态重写
标签，导致viewport-fit=cover实际丢失 - 微信内置浏览器（X5 内核）绝大多数版本根本不识别该属性，
env()值恒为0px -
initial-scale=1.0不能省——iOS Safari 仅在此条件下启用env()函数
@supports 检测必须写对语法，否则整块规则被忽略
错误写法：@supports (env(safe-area-inset-top)) 是非法 CSS 语法，浏览器直接跳过整个 @supports 块。
正确写法必须把 env() 放进具体属性声明中，例如：
@supports (padding-top: env(safe-area-inset-top)) {
header {
padding-top: env(safe-area-inset-top);
}
}
这个检测的本质是“该 CSS 声明能否被解析执行”，不是查函数是否存在。一旦失败，fallback 才生效。
其他注意事项：
- 别用
@supports (background: env(...))—— 某些旧版 Safari 对非布局类属性支持不稳定 - 检测应覆盖所有要用到的变量，比如底部按钮需同时检测
padding-bottom: env(safe-area-inset-bottom)
fixed 元素被刘海遮住？别只改父容器 padding
给 加 padding-top: env(safe-area-inset-top) 对 position: fixed; top: 0 的导航栏完全无效——它仍会从屏幕顶边开始渲染，被刘海裁切。
真正起作用的是控制定位偏移：
- 用
inset替代top/bottom：.header { position: fixed; inset: env(safe-area-inset-top) 0 auto 0; } - 或显式设置
top：top: env(safe-area-inset-top, 20px);（注意单位不能省） - 若用了
z-index，确保该元素层级高于系统 UI（如 Safari 地址栏），否则仍可能被盖住
另外，env() 不支持 fallback 语法（env(safe-area-inset-top, 20px) 是非法的），必须靠层叠或 max() 降级。
Android 设备上别指望 env() 生效
env(safe-area-inset-*) 在 Android Chrome（非 WebView）中基本不识别，Pixel、三星等设备即使加了 viewport-fit=cover 也无响应。部分 Samsung One UI 3.1+ 的 WebView 可能有值，但不能作为兼容依据。
这意味着：
- 不要用 UA 判断是否为 iOS——WKWebView、PWA、微信内嵌行为不一致
- Android 适配得靠
display-cutout媒体查询 + UA + 真机测试组合方案 - 所有
env()相关样式都必须带 fallback，比如padding-top: max(20px, env(safe-area-inset-top));
最易被忽略的一点：真机调试时，务必用 Safari 开发者工具检查 getComputedStyle(document.body).getPropertyValue('padding-top') 是否真读到非零值——模拟器和 Chrome DevTools 模拟 iPhone X+ 默认返回 0px，完全不可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
