env() 仅在 iOS Safari 和基于 WebKit 的 iOS Chrome 中有效，Android Chrome 不支持；必须配置 viewport-fit=cover，且 @supports 要写为 (padding-top: env(safe-area-inset-top))，fixed 元素需用 inset 或 bottom 控制偏移，左右边距推荐用 margin-inline-start/end 并加 fallback。
env() 只在 iOS Safari 和 iOS Chrome（基于 WebKit）里有效，Android Chrome 基本不认；写了没反应，八成是 viewport 配置、@supports 写法或 fallback 单位错了。
viewport-fit=cover 是硬性前提
没有这句 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，env(safe-area-inset-top) 永远返回 0px。它不是可选配置，而是 iOS 启用安全区域变量的开关。
常见踩坑点：
- 第三方 UI 库或 PWA 插件可能动态覆盖 viewport meta，得检查最终渲染出的 HTML 里是否还存在
viewport-fit=cover - 微信内置浏览器、QQ 浏览器 WebView 等即使带了该 meta，也大概率不支持 env()，别靠 UA 判断，要用 @supports 实锤
- 如果用了
initial-scale非 1 的值（比如缩放适配），env() 也可能失效
@supports 必须写对语法
检测语句不是判断函数存不存在，而是判断“把 env() 当作某个 CSS 属性值是否合法”。错一个字符就整个规则被忽略。
立即学习“前端免费学习笔记（深入）”；
正确写法：@supports (padding-top: env(safe-area-inset-top)) { ... }
错误写法举例：
-
@supports (env(safe-area-inset-top))—— env() 不是 CSS 属性，语法非法 -
@supports (safe-area-inset-top: 44px)—— 这不是标准属性名 -
@supports (padding-top: env(safe-area-inset-top, 20px))—— @supports 不接受 fallback，只管函数能否合法出现在属性值中
fixed 元素不能只靠 padding
给 body 加 padding-bottom: env(safe-area-inset-bottom)，对 position: fixed; bottom: 0 的 tabbar 完全无效——因为 fixed 元素脱离文档流，padding 不会推它。
真正起作用的是控制定位偏移：
- 用
inset（推荐）：inset: auto 0 env(safe-area-inset-bottom) 0 - 或显式设
bottom：bottom: env(safe-area-inset-bottom, 0px)（注意单位不能省） - 如果用了
z-index，确保该元素层级高于 Safari 地址栏，否则仍可能被盖住
左右边距别直接写 margin-left/right
env(safe-area-inset-left) 和 env(safe-area-inset-right) 在老版 iOS Safari（如 13.x–14.4）对物理方向属性支持不稳定，容易出现一边生效、一边为 0 的“不对称”现象。
稳妥做法是改用逻辑属性：
margin-inline-start: env(safe-area-inset-left)margin-inline-end: env(safe-area-inset-right)- 确保父容器有
dir: ltr（HTML 默认就是） - iOS 14.5+ 支持较好，但旧版本仍建议加 fallback，比如
margin-inline-start: 20px; margin-inline-start: env(safe-area-inset-left)
最易被忽略的一点：env() 的值是动态的——横屏时 left/right 会互换，灵动岛展开时 top 可能变大，这些变化不会触发重排，但会影响布局。如果你的页面没监听 orientationchange 或用媒体查询做横屏兜底，用户一转屏，tabbar 就可能卡进黑边里。
