必须加 viewport-fit=cover，否则 env(safe-area-inset-bottom) 恒为 0px；该值需作用于 fixed 底部容器自身，且 @supports 检测语法必须正确，calc() 中混用需 safari 15.4+ 支持。
必须加 viewport-fit=cover，否则 env(safe-area-inset-bottom) 永远是 0px——写了也白写。
viewport-fit=cover 是硬性开关，不是可选项
WebKit 只在视口明确允许延伸到安全区时，才注入 safe-area-inset-* 变量。默认的 viewport-fit=auto（iOS WebView fallback 行为）会让 env(safe-area-inset-bottom) 恒为 0px。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">必须完整写在里，漏掉width=device-width或initial-scale=1.0都可能导致声明被忽略 - 微信内置浏览器 8.0.22 之前版本不支持
viewport-fit；企业微信等 Hybrid 容器可能动态篡改该标签，真机调试时建议用 Safari 开发者工具检查 DOM 中是否还存在 - 别写成
viewport-fit=contain或省略，两者都会裁剪安全区，env()仍返回0
padding-bottom: env(safe-area-inset-bottom) 必须作用于 fixed 底部容器自身
对 position: fixed; bottom: 0 的导航栏或按钮，padding-bottom 必须加在它自己身上，而不是 、 或外层 wrapper 上——后者会导致整个页面下移，顶部状态栏区域出空白或错位。
- 常见结构如
<footer class="tab-bar"></footer>：直接加padding-bottom: env(safe-area-inset-bottom) - flex 布局中靠
margin-top: auto推下来的底部栏：把padding-bottom加在它的父 flex 容器上 - 千万别用
bottom: env(safe-area-inset-bottom)替代padding-bottom：它只移动位置，不撑开空间，主内容仍会“长”进导航栏下面，造成视觉重叠
calc() 混用 env() 要盯紧 Safari 版本
padding-bottom: calc(8px + env(safe-area-inset-bottom)) 看似合理，但 Safari 15.4 之前根本不支持 env() 在 calc() 中参与运算，整条声明会被丢弃。
- Safari 15.4+ 才稳定支持
calc(10px + env(safe-area-inset-bottom)) - 低版本必须拆开写：
padding-bottom: 10px;然后紧跟padding-bottom: calc(10px + env(safe-area-inset-bottom)); - 别写
calc(env(safe-area-inset-bottom) * 2)：乘除运算在任何 Safari 版本都不支持，整条规则失效 - PostCSS 插件如
postcss-env-function会把env()转成固定值，破坏动态性，禁用
@supports 检测必须写对语法，否则整块规则被忽略
@supports 不是查函数是否存在，而是检测该 CSS 声明能否被识别为合法值。写错就等于没写。
- ✅ 正确：
@supports (padding-bottom: env(safe-area-inset-bottom)) { .tabbar { padding-bottom: env(safe-area-inset-bottom); } } - ❌ 错误：
@supports (env(safe-area-inset-bottom)) { ... }（语法非法，整块被跳过） - ❌ 错误：
@supports (safe-area-inset-bottom: 34px) { ... }（这不是标准 CSS 属性，检测无效） - fallback 值别设
0，推荐20px或34px：直屏设备也适用，不会因多出空白破坏布局
最易被忽略的一点：env() 返回的是带单位的值（如 34px），不能省略单位写成 bottom: env(safe-area-inset-bottom) 后再额外加 px —— 这会导致语法错误，整条声明失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
