必须添加 viewport-fit=cover 才能使 env(safe-area-inset-bottom) 返回非零值，否则 ios 系统不提供该变量；且需在 css 中使用、配合 @supports 正确检测，并对 fixed 元素用 inset 或 bottom 定位而非 padding。
viewport-fit=cover 缺失导致 env() 恒为 0px
env(safe-area-inset-bottom) 在 iOS 上根本不会注入非零值，除非 viewport-fit=cover 明确启用。漏掉这个参数，哪怕在 iPhone 15 Pro 上也会返回 0px——不是“没检测到”，是系统压根不提供该变量。
必须写全这行 meta，缺一不可：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-
viewport-fit=contain或不写，默认等同于禁用安全区上下文 - 某些 Hybrid 容器（如旧版微信 WebView）会覆盖或忽略该声明，需真机检查渲染后的
<meta>是否被篡改 - 桌面 Safari 或 Chrome 模拟器不支持该变量，真机调试不可替代
env() 被写在不支持的上下文中
env() 只在 CSS 样式表或 <style></style> 标签中生效；JS 内联样式里写它等于白写。
以下写法完全无效：
style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}（React/Vue 中常见错误）
- 浏览器只当字符串透传，不解析 env()
- 动态控制安全区只能靠切换 CSS 类名，或读取
window.visualViewport手动计算（但后者在折叠屏上也不稳定） - 不要对
或直接设padding-bottom，会导致整页下移、顶部留白错位
@supports 检测写法错误导致 fallback 被跳过
@supports 不是检测函数是否存在，而是检测某条声明是否合法。写错语法，整个规则块会被静默丢弃。
错误写法：
@supports (env(safe-area-inset-bottom)) { ... } 或 @supports (safe-area-inset-bottom: 20px) { ... }
- 正确写法只有一种：
@supports (padding-bottom: env(safe-area-inset-bottom)) - 若还需兼容 iOS 11.2 及更早版本，必须用
or连接：@supports (padding-bottom: env(...)) or (padding-bottom: constant(...)) - 单独检测
env()会让 iOS 11.2 直接跳过整块，fallback 彻底失效
作用对象错误：fixed 元素不能靠 padding 推开
给 position: fixed; bottom: 0 的 tabbar 写 padding-bottom: env(safe-area-inset-bottom) 没用——fixed 元素脱离文档流，padding 不改变其定位位置。
真正有效的是定位偏移：
.tabbar { position: fixed; inset: auto 0 env(safe-area-inset-bottom) 0; } 或 bottom: env(safe-area-inset-bottom, 34px);
-
inset是最简洁写法，但需注意 Safari 15.4+ 才稳定支持 -
bottom值必须带单位（px），bottom: env(...)单独写可能被部分内核忽略 - 如果用了
z-index，确保高于系统 UI 层（Safari 地址栏默认约z-index: 1000）
0px 不一定代表 bug，它可能只是告诉你“这台设备没有底部安全区”——比如直屏安卓机、iPad mini 5，或者鸿蒙 5.1 的 ArkWeb 内核（尚未实现该变量）。别急着加 hack，先确认设备是否有物理/逻辑底部遮挡。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
