必须同时设置 viewport-fit=cover、@supports 检测和带单位的 fallback 值，三者缺一不可；否则 iOS Safari 中 env(safe-area-inset-bottom) 等变量恒为 0px，因系统未注入安全区域值。
必须写对 viewport-fit=cover、@supports 检测和 fallback 值三者，缺一不可；否则 env(safe-area-inset-bottom) 等变量在 iOS Safari 中恒为 0px，不是“不生效”，是压根没注入数值。
viewport-fit=cover 是硬性前提，漏一个字都不行
没有这句 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，env() 返回的永远是 0px。它不是可选优化，而是系统注入安全区域值的开关。
-
initial-scale=1.0不能省——iOS Safari 在非 1:1 缩放时会禁用env() - PWA 或 uni-app 等框架可能用 JS 动态重写
<meta>，导致实际丢失viewport-fit=cover - 微信内置浏览器（X5 内核）多数版本无视该属性，
env()值始终为0px，别依赖 UA 判断，要用@supports实锤 - 真机调试时，直接在 Safari 控制台运行
getComputedStyle(document.body).getPropertyValue('padding-bottom')，看返回是否是类似"34px"的带单位字符串，而不是空值或 fallback 值
@supports 检测必须写成合法 CSS 声明
@supports 不是查函数是否存在，而是检测“把 env() 当作某个属性值”是否被浏览器识别为合法语法。写错就等于整块规则被丢弃。
- ✅ 正确：
@supports (padding-bottom: env(safe-area-inset-bottom)) { .tabbar { padding-bottom: env(safe-area-inset-bottom, 0px); } } - ❌ 错误：
@supports (env(safe-area-inset-bottom)) { ... }（语法非法，整个块被忽略） - ❌ 错误：
@supports (safe-area-inset-bottom: 34px) { ... }（这不是标准 CSS 属性，检测无效） - 如果项目需兼容 iOS 11.2 以下，
constant()已被 Safari 15+ 彻底移除，现代项目应只保留env()+ fallback，删掉所有constant()相关代码
fixed 元素被遮挡？别只改父容器 padding
padding-bottom: env(safe-area-inset-bottom) 对 position: fixed 的底部按钮完全无效——因为 fixed 元素脱离文档流，padding 动不了它。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是控制定位偏移：
.tabbar { position: fixed; bottom: 0; bottom: env(safe-area-inset-bottom, 0px); }（注意单位不能省） - 更现代写法：
inset: auto 0 env(safe-area-inset-bottom, 0px) 0;，兼容性略好于重复写bottom - 如果用了
z-index分层，确保该元素层级高于系统 UI（如 Safari 地址栏），否则仍可能被盖住 - 避免在
height: 100vh容器内叠加padding-bottom——100vh本身已包含刘海高度，再加padding会造成双倍留白
fallback 值别设 0px，推荐 20px 或 34px
env() 的 fallback 不是“兜底”，而是直屏设备的真实可用值。设成 0px 会导致老设备上导航栏紧贴状态栏被裁切。
-
padding-top: env(safe-area-inset-top, 20px)比0px更稳妥，20px 覆盖多数直屏安卓的状态栏高度 -
padding-bottom: env(safe-area-inset-bottom, 34px)是 iPhone 底部手势条的常见高度，既适配异形屏，也不破坏传统布局 - fallback 必须带单位：
env(safe-area-inset-bottom, 0)无效，env(safe-area-inset-bottom, 0px)才合法 -
env(safe-area-inset-left)和env(safe-area-inset-right)在绝大多数设备上返回0px，仅极少数曲面屏（如 iPhone 14 Pro）可能非零，日常开发几乎无需主动适配
真正容易被忽略的是：env() 值是动态变化的——横竖屏切换、Safari 地址栏收起/展开都会改变 safe-area-inset-top，所以不要把它当静态常量硬编码进 JS 计算逻辑里。
