env()仅iOS Safari等WebKit内核有效，Android Chrome不支持；须用@supports (padding-top: env(safe-area-inset-top))检测；fixed元素需用inset或bottom定位；fallback用max()或层叠；值动态变化且不可JS读取。
env()只对 iOS Safari 和部分 WebView 有效，Android Chrome 基本不认
env(safe-area-inset-*) 不是跨平台方案，它由 WebKit 内核注入，仅在 iOS Safari、iPadOS Safari、iOS Chrome（本质是 WKWebView）中稳定可用。Android Chrome（非 WebView）无论加不加 viewport-fit=cover，env(safe-area-inset-bottom) 都返回 0px；三星 One UI 3.1+ 或部分旧版 QQ 浏览器 WebView 可能有值，但不能当作兼容依据。别用 UA 判断，必须靠 @supports 实锤检测。
@supports 必须写成属性声明形式，否则整块规则失效
@supports (padding-top: env(safe-area-inset-top)) 是唯一可靠写法。它检测的是“把 env() 当作某个 CSS 属性值是否合法”，不是查函数是否存在。常见错误包括：
-
@supports (env(safe-area-inset-top))—— 语法非法，浏览器直接忽略整条@supports块 -
@supports (safe-area-inset-top: 44px)—— 这不是标准 CSS 属性，检测永远为 false - 写成
@supports (background: env(safe-area-inset-top))—— 某些旧版 Safari 对非布局属性支持不稳定，推荐只用padding或margin类属性检测
fixed 元素必须用 inset 或 bottom 控制，不能只靠 padding
给 body 加 padding-bottom: env(safe-area-inset-bottom) 对 position: fixed 的底部按钮完全无效，因为 fixed 元素已脱离文档流。真正起作用的是定位偏移：
- 推荐用
inset：.tabbar { position: fixed; inset: auto 0 env(safe-area-inset-bottom) 0; } - 或显式设置
bottom：bottom: env(safe-area-inset-bottom, 0px)（注意单位不能省） - 如果用了
z-index，确保该元素层级高于系统 UI（如 Safari 地址栏），否则仍可能被盖住
fallback 必须用 max() 或层叠，env() 不支持内置 fallback 语法
env(safe-area-inset-top, 20px) 是非法写法，会导致整条 CSS 声明被丢弃。正确 fallback 方式有两种：
- 用
max()包裹：padding-top: max(0px, env(safe-area-inset-top));—— 不支持env()时退化为0px，安全 - 用 CSS 层叠顺序：
padding-top: 20px; padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);—— 但constant()已被 Safari 15+ 彻底移除，现代项目应直接删掉 - 全局
padding尽量避免设在html或body上，影响不可控；优先作用于具体容器（如.header、.tabbar）
最常被忽略的一点：env() 值是动态的——横竖屏切换、地址栏自动隐藏（PWA/全屏模式下）、甚至系统字体缩放都可能改变 env(safe-area-inset-top) 的值。别假设它恒定为 44px，也别在 JS 里试图用 getComputedStyle 读取它（返回 unset）。它只活在 CSS 声明里，且只在真机 Safari / WKWebView 中实时更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
