真正可用的是env(safe-area-inset-top)等环境变量，必须同时满足viewport-fit=cover、@supports(padding-top:env(safe-area-inset-top))检测、合理fallback三者；Android Chrome不支持，iOS仅在视口变化时更新值，软键盘弹出不触发更新。
没有叫 safe-area-inset 的 CSS 属性，真正能用的是 env(safe-area-inset-top) 这类环境变量，且必须同时满足三件事：viewport-fit=cover、@supports 正确检测、合理 fallback；缺一不可，否则在真机上就是 0px 或整条规则被丢弃。
viewport-fit=cover 是硬性前提，不是可选项
不加这句 meta，env(safe-area-inset-bottom) 永远是 0px，无论你写多少遍都没用。iOS 只在明确启用视口扩展时才注入这些值。
-
必须完整存在，不能漏initial-scale=1.0，也不能被 JS 动态覆盖（PWA、微信 WebView 常偷偷重写） - 部分安卓设备（如旧版三星、Pixel）即使加了该 meta，
env()依然不识别——Android Chrome（非 WebView）基本不支持 - iOS 中，
viewport-fit=cover还会影响 Safari 地址栏是否自动隐藏，这会动态改变env(safe-area-inset-top)的值
@supports 必须写对语法，否则整块规则失效
写成 @supports (env(safe-area-inset-top)) 是非法语法，浏览器直接跳过整个 @supports 块，不会执行里面任何样式。
- 正确写法是把
env()放进属性声明里：@supports (padding-top: env(safe-area-inset-top)) { ... } - 这个检测不是查“函数是否存在”，而是查“该 CSS 声明能否被解析执行”；失败则 fallback 生效
- 别用
@supports (background: env(...))—— 旧版 Safari 对非布局属性支持不稳定 - 不要混写
constant()和env()：Safari 15+ 已彻底移除constant()，留着只会增加维护成本
fixed 元素被遮挡？padding 不起作用，得改定位
padding-bottom: env(safe-area-inset-bottom) 对 position: fixed; bottom: 0 的 tabbar 完全无效——fixed 元素脱离文档流，padding 是内部空间，动不了位置。
- 正确做法是控制定位偏移：
bottom: env(safe-area-inset-bottom, 0px)（单位不能省） - 更现代的写法是用
inset: auto 0 env(safe-area-inset-bottom) 0 - 如果用了
z-index分层，确保该元素层级高于系统 UI（如 Safari 地址栏），否则仍可能被盖住 - 别在
height: 100vh容器内叠加padding-bottom：100vh本身已包含手势条区域高度，再加padding会造成双倍留白
fallback 必须显式提供，max() 是最稳妥方案
env() 不支持 env(safe-area-inset-top, 20px) 这种 fallback 语法，写错会直接报 CSS 解析错误。
- 安全做法是用
max(0px, env(safe-area-inset-bottom))包一层，不支持env()的浏览器会退化为0px - fallback 值建议设为保守估计（如
44px或20px），别用0px——否则老设备上导航栏可能紧贴状态栏被裁切 - 不要在
html或body上全局设置env()，影响不可控；只作用于需要贴边的容器（如 footer、header） - React/Vue 的内联样式（如
style={{ paddingTop: 'env(safe-area-inset-top)' }}）完全无效——JS 不解析 CSS 函数，只当字符串透传
最易被忽略的一点：iOS 的 env() 值只在视口尺寸变化（如旋转）时更新，软键盘弹出不会触发刷新；所以依赖它做动态避让的逻辑，在输入场景下大概率失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
