calc() 中直接使用 env() 会报错，必须用 max() 包裹，如 calc(100dvh - max(0px, env(safe-area-inset-bottom)))，并配合 @supports (padding-bottom: env(safe-area-inset-bottom)) 检测兼容性。
calc() 里直接套 env() 会报错，必须用 max() 或 fallback 包一层
直接写 calc(100vh - env(safe-area-inset-bottom))
是非法语法，CSS 解析器会丢弃整条规则。env() 不支持内联 fallback（比如 env(safe-area-inset-bottom, 0px)），也不能直接参与 calc 运算——浏览器要求它必须先被“兜住”。
正确做法是用 max() 包裹：calc(100vh - max(0px, env(safe-area-inset-bottom)))。这样在不支持 env() 的环境里，max(0px, env(...)) 会退化为 0px，整个 calc 表达式仍合法。
-
max()是目前最轻量、最兼容的兜底方案，iOS 11.2+ 和部分安卓 WebView 都能识别 - 别用
min()或自定义 CSS 变量中转——变量值若为unset（env 失效时），后续 calc 会静默失败 - 真机调试时，可在 Safari 开发者工具中执行
getComputedStyle(document.body).getPropertyValue('height')看是否返回带单位的数值，而不是空字符串
用 calc() 做全高布局时，100vh 本身会动态变化
在 iOS Safari 中，100vh 在地址栏展开/收起、横竖屏切换时会实时重算，而 env(safe-area-inset-bottom) 同样动态更新。但两者变化节奏不一致，直接相减容易导致底部错位或滚动条闪现。
更稳的做法是放弃 100vh，改用 100dvh（动态视口高度）：height: calc(100dvh - max(0px, env(safe-area-inset-bottom)))。它从 iOS 16.4+ 开始支持，能更好匹配安全区变化。
- 若需兼容 iOS 15.x，只能降级为
min-height: 100vh+padding-bottom组合，避免高度塌陷 - 不要对
html或body全局设height: calc(...)——会影响子元素百分比高度计算逻辑 - 滚动容器（如
.content）建议用max-height: calc(...)而非height，保留弹性
fixed 元素不能靠 calc(env()) 拉位置，得用 inset 或 bottom
给 position: fixed 元素写 top: calc(0px + env(safe-area-inset-top)) 看似合理，但实际无效：fixed 元素脱离文档流，calc 并不改变其锚点，只是把一个数值赋给 top，而该数值在非刘海设备上是 0px，无害但无用；问题在于，它没解决定位基准偏移的本质。
真正起作用的是控制定位区域本身：inset 属性（或显式 bottom）才是现代写法：
.tabbar { position: fixed; inset: auto 0 env(safe-area-inset-bottom) 0; }- 或传统写法：
bottom: env(safe-area-inset-bottom, 0px);（注意单位不能省） - 如果用了
z-index，确保该元素层级高于系统 UI（如 Safari 地址栏），否则仍可能被盖住
@supports 必须包裹 calc + env 组合，否则老设备直接失效
只写 @supports (env(safe-area-inset-bottom)) 是语法错误，整块规则会被浏览器忽略；而写 @supports (height: calc(100vh - env(safe-area-inset-bottom))) 也不可靠——某些旧版 Safari 对 calc 内含 env 的支持不稳定。
稳妥做法是检测 env() 在布局属性中的可用性：@supports (padding-bottom: env(safe-area-inset-bottom))，再在里面写 calc 表达式：
- 这个检测不是查函数是否存在，而是查“该声明能否被解析并生效”
- 检测通过后，再写
height: calc(100dvh - max(0px, env(safe-area-inset-bottom)))才安全 - 别在同一个选择器里混写
constant()和env()——Safari 15+ 已彻底移除constant()，留着只会增加维护成本
实际最易被忽略的一点：env() 值是动态的，横屏、分屏、第三方壳等场景下会突变，不能当静态常量记死；所有依赖它的 calc 表达式都必须可中断、可回退，否则用户滑动或旋转屏幕时，页面会短暂错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
