env()需配合@supports检测与fallback使用，且依赖viewport-fit=cover声明；iOS Safari仅在initial-scale=1且viewport-fit=cover时启用，Android不支持；正确写法为@supports (padding-top: env(safe-area-inset-top))，并叠加constant()兼容旧版。
env() 不能直接写，写了旧版 Safari 会整条 CSS 失效；必须用 @supports 检测 + 合理 fallback，否则 iPhone X–11.1 用户看到的不是留白，而是头部被刘海吞掉。
为什么 env(safe-area-inset-top) 写了没反应
最常见原因是 <meta name="viewport"> 缺失或没带 viewport-fit=cover。iOS Safari 只有在声明 initial-scale=1 且 viewport-fit=cover 时，才启用 env() 支持——否则四个 safe-area-inset-* 全是 0px。
实操建议：
- 检查 HTML 中是否存在：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 微信内置浏览器、部分安卓 WebView（如旧版 QQ 浏览器）根本不支持
env()，别靠 UA 判断，要用@supports实锤 - 在控制台运行：
getComputedStyle(document.body).getPropertyValue('padding-top')，看是否真返回了带px的值，而不是空字符串或20px（fallback 值）
@supports (padding-top: env(safe-area-inset-top)) 怎么写才对
这个检测语句本身容易写错：它不是检测函数是否存在，而是检测“把 env() 当作某个 CSS 属性值是否合法”。语法错误会导致检测永远为 false。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- ✅ 正确写法：
@supports (padding-top: env(safe-area-inset-top)) - ❌ 错误写法：
@supports (env(safe-area-inset-top))（env()不是属性，不能单独检测）、@supports (safe-area-inset-top: 44px)（这不是 CSS 属性） - fallback 值别设
0，推荐20px或44px，直屏设备也适用，不会破坏布局 - Android 不支持
env()，也不该用这个检测——它纯 iOS 特性，Android 适配得靠display-cutout和 UA 判断
fixed 头部被刘海遮住，top: env(safe-area-inset-top) 够吗
单写 top: env(safe-area-inset-top) 在 iOS 11.2+ 是有效的，但老设备（iOS 11.0–11.1）会失效，而且部分微信 WebView 会忽略它。
实操建议：
- 必须叠加兼容写法：
top: 0; top: constant(safe-area-inset-top); top: env(safe-area-inset-top);（CSS 层叠顺序生效） - 不要只靠
top，如果头部有背景色或阴影，还得同步处理padding-top或height，否则内容从刘海下开始显示 - 避免在 Vue/React 的
style={{ top: 'env(safe-area-inset-top)' }}里用——JS 不解析env()，只当字符串透传，浏览器不认 - 横屏时
env(safe-area-inset-top)可能变0，而env(safe-area-inset-left)或env(safe-area-inset-right)非零（比如 iPad Pro 多任务侧边栏），别写死逻辑
calc() 和 env() 组合踩坑点
env() 返回的是带单位的值（如 44px），但 calc() 对运算符和单位极其敏感，稍错就整个声明失效。
实操建议：
- ✅ 安全加减：
padding-top: calc(env(safe-area-inset-top) + 8px) - ❌ 危险乘除：
margin-top: calc(env(safe-area-inset-top) * 2)（calc()不支持变量乘除） - ❌ 单位遗漏：
height: calc(100vh - env(safe-area-inset-bottom))看似合法，但滚动时100vh动态变化，底部会跳动——应改用min-height: 100vh+padding-bottom - 别用
calc(100vh - env(safe-area-inset-bottom))做全高容器，尤其含overflow-y: auto的场景，视口高度抖动会导致底部错位
真正麻烦的不是怎么写对，而是你没法靠 JS 直接读取 env() 值做逻辑判断——它只活在 CSS 层。需要动态响应安全区变化（比如折叠屏转横屏），只能监听 resize 后查 document.documentElement.getBoundingClientRect()，再手动估算，没有银弹。
