必须加 viewport-fit=cover，否则 env() 永远返回 0px；正确写法是 meta 标签含 width=device-width、initial-scale=1.0 和 viewport-fit=cover，并用 @supports 包裹 env() 实现兼容降级。
必须加 viewport-fit=cover，否则 env() 永远是 0px
只写 padding-bottom: env(safe-area-inset-bottom) 却没配 viewport-fit=cover，等于白写。iOS WebKit 不会注入任何 safe-area-inset-* 变量，env() 直接返回 0px，底部按钮照旧被黑条吞掉。
正确写法是确保 <meta> 标签完整且未被覆盖：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
- 漏掉
width=device-width或initial-scale=1.0都可能导致 Safari 忽略viewport-fit - 微信 8.0.22 之前、部分企业微信 WebView 会强制重写
<meta>，需在真机上用 Safari 远程调试检查最终渲染结果 - Hybrid 容器（如某些壳App）可能禁用
viewport-fit，此时env()无效，得靠 UA + JS 注入降级 class
padding-bottom 是唯一靠谱的落点，别碰 bottom/margin-bottom
对 position: fixed; bottom: 0 的底部栏，直接在该元素上设 padding-bottom: env(safe-area-inset-bottom) —— 这是唯一能“撑开”布局、让内容真正浮在黑条上方的方式。
-
bottom: env(safe-area-inset-bottom)只是下推元素，容器高度不变，内容仍可能被截断 -
margin-bottom在脱离文档流的fixed元素上完全无效 - 若用
flex布局 +margin-top: auto推底部栏，要把padding-bottom: env(safe-area-inset-bottom)加在父容器上，而不是子元素 - 绝对禁止给
或加padding-bottom，整页会下移，顶部状态栏区域可能留白或错位
@supports 包裹 env()，不兼容就自动 fallback
iOS 11.0+ 才支持 env()，且早期版本（11.0–11.1）只认 constant()（已废弃）。不加兼容判断，低版本会把 env() 当无效值，回退到初始值（比如 0），造成顶部塌陷或底部消失。
正确写法是用 @supports 显式声明支持性：
@supports (padding-top: env(safe-area-inset-top)) {
header {
padding-top: env(safe-area-inset-top);
}
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.fixed-nav {
padding-bottom: env(safe-area-inset-bottom);
}
}
- 现在不用再写
constant()，iOS 15+ 已完全弃用，写了反而可能触发解析异常 -
@supports内部的属性值必须带单位（如env(safe-area-inset-top)），不能只写函数名 - 安卓和旧 iOS 会忽略整个
@supports块，天然 fallback 到无 padding 状态，安全
calc() 混用 env() 要看 Safari 版本
想加个 8px 间距？写 padding-bottom: calc(8px + env(safe-area-inset-bottom)) 看似合理，但 Safari 15.4 之前根本不认这种写法，整条声明会被丢弃。
- Safari 15.4+ 才支持
calc()内混合单位 +env() - 稳妥做法是先写降级值：
padding-bottom: 8px，再覆盖：padding-bottom: calc(8px + env(safe-area-inset-bottom)) -
env()不支持乘除运算，calc(env(safe-area-inset-bottom) * 2)这种写法 Safari 直接忽略整条规则 - 真机测试比模拟器更可靠——某些 iOS 模拟器版本不会真实注入安全区变量
实际生效依赖三个不可拆分的环节：meta 声明、CSS 作用位置、运行时环境支持。少一个，env() 就只是个字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
