env() 不能赋值给 css 变量或参与 repeat() 计算，仅可原样用于属性值并需 @supports 检测与 fallback；必须配合 viewport-fit=cover meta 标签，且仅 ios safari 支持，android chrome 不支持。
直接结论：env() 不能赋值给 CSS 变量，也不能参与 repeat() 的重复次数计算；它只能原样写在属性值中，且必须配合 @supports 检测和降级 fallback 才能安全使用。
为什么不能把 env(safe-area-inset-bottom) 赋给 --safe-bottom
CSS 变量（:root { --safe-bottom: env(safe-area-inset-bottom); }）在不支持 env() 的浏览器里会解析为字符串字面量，不是函数调用——结果是 padding-bottom: var(--safe-bottom) 展开后变成 padding-bottom: env(safe-area-inset-bottom)，但此时浏览器根本不认这个字符串，整条声明被丢弃。最终你得到的是未定义行为，不是 0px。
真正有效的写法只有两种：
- 直接写：
padding-bottom: env(safe-area-inset-bottom, 0px); - 或用
calc()包裹后参与计算：bottom: calc(env(safe-area-inset-bottom) + 8px);（注意：Safari 15.4+ 才支持这种写法）
@supports (padding-bottom: env(safe-area-inset-bottom)) 必须这么写
这个检测不是查“函数是否存在”，而是查“该属性声明能否被浏览器合法解析”。写错就等于没写：
- ✅ 正确：
@supports (padding-bottom: env(safe-area-inset-bottom)) { ... } - ❌ 错误：
@supports (env(safe-area-inset-bottom)) { ... }（语法非法，整块规则被忽略） - ❌ 错误：
@supports (safe-area-inset-bottom: 0px) { ... }（这不是 CSS 属性）
而且必须先写 fallback 值，再用 @supports 覆盖，否则老设备上 padding-bottom 会继承或取默认值，底部内容直接被截断。
固定定位底部栏只认 padding-bottom，别碰 margin-bottom 或 bottom
对 position: fixed; bottom: 0 的导航栏，以下写法都危险：
-
margin-bottom: env(safe-area-inset-bottom)：破坏 flex/grid 容器高度计算，滚动时按钮可能突然“掉出”视口 -
bottom: env(safe-area-inset-bottom)：元素向上偏移，但自身高度没变，黑条上方留白，实际可点击区域变小
唯一可靠方式是加在元素自身上：
.tab-bar {
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
注意回退值 0px 必须显式写出，不能省略。
viewport-fit=cover 缺了就全白搭
env() 在 iOS 上根本不会生效，除非 HTML 中有这行完整的 <meta> 标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
漏掉 width=device-width 或 initial-scale=1.0，部分 iOS WebView 会直接忽略 viewport-fit=cover；微信 8.0.22 之前、企业微信等 Hybrid 容器还可能动态覆盖该标签——真机调试时务必用 Safari 开发者工具检查 getComputedStyle(document.body).getPropertyValue('padding-bottom') 是否返回非零值。
Android Chrome 不支持 env()，别把它当跨平台方案用；左右两侧的 env(safe-area-inset-left/right) 在绝大多数设备上恒为 0px，几乎不用适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
