安全使用 env() 需启用 viewport-fit=cover 元标签，配合 calc() 和 max()/min() 回退，优先适配 top/bottom，安卓左右值不可靠，真机验证必不可少。
env() 函数怎么安全读取刘海屏安全区
直接用 env(safe-area-inset-top) 会报错或返回 0，不是浏览器不支持，而是没启用视口元标签。iOS 11.2+ 和部分安卓 WebView 才支持，且必须声明 viewport 的 viewport-fit=cover。
- 漏加
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">→env()全部返回 0 - 在非全屏 WebView（比如微信内置浏览器）里，
env()可能不可用，得降级用constant()（iOS 11.0–11.1） -
env()返回的是带单位的值（如44px），不能直接参与 calc 运算而不包裹calc()
正确写法示例：
body {
padding-top: calc(env(safe-area-inset-top, 0px));
padding-bottom: calc(env(safe-area-inset-bottom, 0px));
}
CSS 变量如何配合 env() 做渐进式 fallback
硬编码 env() 容易导致老设备布局塌陷，必须用 CSS 变量兜底。关键不是“设默认值”，而是让变量本身可被覆盖或检测。
- 别写
--safe-top: env(safe-area-inset-top);—— 没 fallback，旧设备就变成undefined - 要写成
--safe-top: max(0px, env(safe-area-inset-top, 0px));，利用max()让不支持的环境回退到 0 - 更稳妥的做法是定义两层变量：
--safe-top-fallback: 0px;，再用@supports (padding: env(safe-area-inset-top))块内重置
小技巧：用 min() / max() 包一层，比 JS 检测更轻量，也避免样式闪动。
立即学习“前端免费学习笔记（深入）”；
刘海区域适配常见误用场景
很多人以为只要加了 env() 就万事大吉，结果首页正常、弹窗错位、fixed 导航栏被遮挡——问题出在作用域和层级上。
-
env()是全局环境变量，但它的值取决于当前视口状态；横竖屏切换、Safari 地址栏收起时，env(safe-area-inset-top)会动态变化，无需 JS 监听 - fixed 元素如果没设置
top或padding-top，即使父容器有 safe-area 适配，它仍可能盖住状态栏 - 使用
position: sticky的导航栏，需额外加top: calc(env(safe-area-inset-top) + 1px)避免吸附起点错误 - Canvas 或 WebGL 全屏渲染时，
env()不影响 canvas 坐标系，必须 JS 读取screen.availTop或window.visualViewport补偿
安卓刘海屏兼容性差异要点
安卓厂商实现五花八门，env() 在 Chrome 69+ 支持，但华为、小米等定制系统可能只在特定 WebView 版本中可用，甚至返回错误值。
- 华为 EMUI 10+、小米 MIUI 12+ 的 WebView 已支持
env()，但部分机型仍需开启「应用使用全面屏显示」开关 - 安卓端
env(safe-area-inset-left/right)多数无效，实际只有top和bottom较可靠；左右侧刘海建议用媒体查询 + 设备 UA 判断降级 - Chrome for Android 85+ 开始支持
env()，但桌面版 Chrome 模拟移动端时不会注入这些值，调试务必真机验证
最保险的底线：所有涉及顶部留白的逻辑，都以 env(safe-area-inset-top, 0px) 为基准，且用 calc() 包裹，不依赖 JS 注入或 class 切换。
真正难的不是写对那几行 CSS，而是意识到 env() 是个“有条件生效”的运行时变量——它不报错，也不警告，只是默默变成 0，然后你花半天才发现导航栏压住了电池图标。
