viewport-fit=cover是安全区适配的硬性前提，缺失则env(safe-area-inset-bottom)等变量恒为0px；必须与width=device-width、initial-scale=1.0共存于同一meta标签中，且需通过@supports检测并配合padding-bottom: env(safe-area-inset-bottom)作用于固定底部元素。
viewport-fit=cover 是前提，不是可选项
不加这句，env(safe-area-inset-bottom) 永远返回 0px。iOS Safari 默认行为是 viewport-fit=auto，相当于把网页锁在“安全显示区”内，根本不会注入任何 safe-area-inset-* 变量。
必须在 中写全：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
漏掉 width=device-width 或 initial-scale=1.0 都可能导致失效；某些构建工具（如 Vite 插件）会自动注入 <meta>，但可能覆盖你手动写的，务必检查最终 HTML 源码中是否完整存在。
padding-bottom: env(safe-area-inset-bottom) 加在哪？
不能加在 或 上——整页下移，顶部状态栏区域可能出空白或错位；也不能加在 position: fixed; bottom: 0 的按钮自身上用 bottom 属性（env() 对 top/bottom 无效，旧版 Safari 会直接丢弃整条规则）。
- 对固定定位底部栏（如
.tabbar），直接加在该元素上：padding-bottom: env(safe-area-inset-bottom) - 对 flex 布局中靠
margin-top: auto推下来的底部内容，应加在父容器（如<main></main>或#app）上 - 务必配合
box-sizing: border-box，否则 padding 会让容器总高度超出预期
calc() 混用 env() 要看 Safari 版本
想让底部留 8px 间距，写 padding-bottom: calc(8px + env(safe-area-inset-bottom)) 看似合理，但 Safari 15.4 之前不支持单位混合运算，整条声明会被浏览器忽略。
兼容写法只能拆成两条：
padding-bottom: 8px;<br>padding-bottom: calc(8px + env(safe-area-inset-bottom));
env() 不支持乘除，calc(env(safe-area-inset-bottom) * 2) 这种写法 Safari 直接丢弃；constant() 已废弃，别再用。
@supports 检测比 UA 判断更可靠
微信、企业微信、QQ 浏览器等 WebView 可能根本不支持 viewport-fit，此时 env() 无效。不要依赖 navigator.userAgent 判断机型，容易漏判或误判。
唯一推荐的检测方式是：
@supports (padding-bottom: env(safe-area-inset-bottom)) {<br> .tabbar { padding-bottom: env(safe-area-inset-bottom); }<br>}
真机测试不可跳过——DevTools 模拟 iPhone X/14 全部正常，但真机上若 viewport-fit=cover 被 Hybrid 容器覆盖或未生效，env() 就还是 0px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
