必须显式声明<meta name="viewport" content="viewport-fit=cover">，否则env(safe-area-inset-bottom)不会注入；仅对padding-bottom稳定生效，须按constant()→env()降级顺序书写，并避免JS直接读取或内联使用。
viewport-fit=cover 没写或被覆盖
env(safe-area-inset-bottom) 在 iOS Safari 中根本不会注入，除非 <meta name="viewport" content="viewport-fit=cover"> 显式存在且未被脚本覆盖。漏掉这行，变量值恒为 0px，不是“失效”，是压根没激活。
常见干扰源：
- 某些 UI 框架（如 Vant、NutUI）或构建工具会自动注入 viewport meta，把你写的覆盖掉
- uniapp 项目中，
vue.config.js或manifest.json里配置的 viewport 可能优先级更高 - 页面嵌在 iframe 里，而父页没声明
viewport-fit=cover，子页无法继承
用了 margin-bottom 或 bottom 而非 padding-bottom
env(safe-area-inset-bottom) 只对 padding-bottom 稳定生效；用 margin-bottom 会破坏 flex/grid 高度计算，导致内容被挤出可视区；用 bottom 则让元素上移，反而悬在黑条上方，更难点击。
正确做法只有一种：
立即学习“前端免费学习笔记（深入）”；
- 作用于
position: fixed或position: absolute的底部容器本身（比如.tabbar），不是它的子元素 - 必须写成
padding-bottom: env(safe-area-inset-bottom, 0px)，回退值不能省略 - 避免混用物理属性（
margin-left）和逻辑属性（margin-inline-start），Safari 解析易冲突
@supports 检测或 constant() 写法顺序错误
@supports (padding-bottom: env(safe-area-inset-bottom)) 在旧版 Safari 上检测不可靠，整块规则可能被跳过，fallback 一并丢弃。别依赖它做降级。
兼容 iOS 11.2 以下需用 constant()，但顺序至关重要：
- ✅ 正确顺序：
padding-bottom: 34px; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom, 0px); - ❌ 错误顺序：把
env()放前面，旧版 Safari 直接忽略后续所有声明 - 现代项目可只留
env()，但若需支持 iOS 11.0–11.2，必须按降级顺序书写
JS 试图读取 env() 值或误用 calc()
getComputedStyle(el).paddingBottom 返回的是字符串 "env(safe-area-inset-bottom, 0px)"，不是计算后数值，无法直接用于逻辑判断。硬解析极易出错。
calc() 是安全用法，但要注意写法：
- 推荐：
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));—— 即使 env() 被忽略，calc(16px + 0px)仍得16px - 禁用：
padding-bottom: env(safe-area-inset-bottom);—— 无 fallback，不支持环境直接丢弃整条声明 - 不要在内联 style 或 JS 的
el.style.paddingBottom中写 env()，CSS 自定义属性也不可靠
0px 不一定是 bug —— 它可能只是告诉你“这台设备没有底部安全区”，比如直屏安卓机、iPad mini 5 或横屏状态下的多数 iPad。别急着改代码，先查设备型号和方向。 
