env(safe-area-inset-*) 仅 ios safari 和部分 webkit 浏览器支持，android chrome 和微信 x5 内核基本不识别；必须配合 viewport-fit=cover 且 initial-scale=1.0 才生效，@supports 检测需写为 padding-top: env(safe-area-inset-top)，fixed 元素应使用 inset 或 bottom 而非 padding，fallback 值须带单位（如 44px/34px），constant() 已废弃。
env(safe-area-inset-*) 只在 iOS Safari 和部分 WebKit 内核浏览器中有效，Android Chrome 基本不识别，微信内置浏览器（X5）多数版本也不支持 —— 别把它当跨平台方案用。
viewport-fit=cover 是 env() 生效的硬性前提
没这句 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，env(safe-area-inset-top) 永远返回 0px。iOS 只在明确启用视口扩展时才注入这些变量。
常见踩坑点：
- 第三方 SDK 或 PWA 初始化脚本动态重写了
<meta>，导致viewport-fit=cover实际丢失 -
initial-scale=1.0不能省 —— iOS Safari 仅在此条件下启用env() - 微信小程序或 X5 内核 WebView 中，该 meta 被忽略，
env()值恒为0px
@supports 检测必须写对语法，否则整块规则失效
写成 @supports (env(safe-area-inset-top)) 是非法语法，浏览器直接跳过整段 CSS。正确检测方式是把 env() 放进属性声明里：
@supports (padding-top: env(safe-area-inset-top)) {
body {
padding-top: env(safe-area-inset-top, 44px);
}
}
这个检测不是查“函数是否存在”，而是查“该 CSS 声明能否被解析执行”。一旦失败，@supports 块内所有样式都不生效，fallback 才起作用。
额外提醒：
- 别用
@supports (background: env())—— 旧版 Safari 对非布局属性支持不稳定 - 检测项要和实际使用项一致：用
padding-bottom就检测padding-bottom，别混用
fixed 元素被底部横条遮挡？别只改父容器 padding
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 地址栏），否则仍可能被盖住 - 避免在
height: 100vh容器内叠加padding-bottom——100vh本身已包含刘海区域高度，再加 padding 会造成双倍留白
fallback 值必须带单位，且建议保守估计
env(safe-area-inset-bottom, 0) 是无效的 —— 漏单位会导致 fallback 失效，老设备上可能直接渲染为 0，导航栏紧贴状态栏被裁切。
合理 fallback 建议：
- 顶部：用
44px（覆盖 iPhone 状态栏典型高度） - 底部：用
34px（iPhone Home Indicator 区域典型值），灵动岛机型可考虑50px - 不要混写
constant()和env()—— Safari 15+ 已彻底移除constant()，留着只会增加维护成本
真机调试时，用 Safari 开发者工具 → Elements → 计算样式，搜索 env(safe-area-inset-bottom) 是否有值（如 34px），没值就说明当前环境根本不提供 —— 这比看文档更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
