env(safe-area-inset-bottom) 返回 0px 是正常行为，表示设备无安全区；应通过 viewport-fit=cover 和 @supports（含 env() 或 constant()）双重检测兼容性，并用层叠 fallback 替代函数内建默认值。
env(safe-area-inset-bottom) 返回 0px 不是失效，而是设备没安全区
很多开发者看到 env(safe-area-inset-bottom) 在 iPhone 8 或安卓普通手机上计算出 0px，就以为“函数没生效”或“浏览器不支持”，其实这是正常行为。iOS 和现代 Android 的 WebView 只要启用了 viewport-fit=cover，就会始终返回一个数值——有安全区（如 iPhone 15）返回 24px，无安全区（如 iPad mini 5）就返回 0px。它不会返回 undefined，也不会触发 CSS 回退。
所以别靠“值是否为 0”来判断兼容性；真正该检查的是：viewport-fit=cover 是否生效、@supports 是否覆盖了当前 UA、以及该环境是否根本无视 env()（比如旧版 Samsung Internet v15）。
必须用层叠 fallback，不能依赖 env() 的第二个参数
env(safe-area-inset-bottom, 20px) 这种带默认值的写法看似省事，但实际不可靠：Safari 14.5 之前、Chrome 90 之前、Firefox 所有版本都不支持该语法，遇到就整条声明丢弃——连 20px 都不会生效。
真正稳定的做法是利用 CSS 层叠顺序，让不支持的浏览器自然降级：
立即学习“前端免费学习笔记（深入）”；
- 先写固定值：
padding-bottom: 20px - 再写 env() 声明：
padding-bottom: env(safe-area-inset-bottom)
支持的浏览器会用后者覆盖前者；不支持的直接忽略第二行，保留第一行。这个逻辑比函数内建 fallback 更宽泛、更可控。
@supports 检测必须包含 constant()，否则 iOS 11.2 直接跳过
只写 @supports (padding-bottom: env(safe-area-inset-bottom)) 是危险的。iOS 11.2 的 Safari 完全不认识 env()，整个 @supports 块会被当成无效条件而跳过，导致连 constant() 都加载不了。
正确检测必须用 or 连接两个语法：
@supports (padding-bottom: env(safe-area-inset-bottom)) or (padding-bottom: constant(safe-area-inset-bottom)) {
.main-content {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}这样 iOS 11.2 走左边分支，iOS 11.3+ 走右边分支，Android Chrome 则可能两个都不匹配而跳过——这反而是你想要的：避免在不支持环境中触发解析错误。
fixed 底部按钮要用 bottom: env()，不是 padding
给 body 或 html 加 padding-bottom 是常见误区。它会让整个页面下移，顶部状态栏区域也可能被意外撑开；而 position: fixed; bottom: 0 的按钮，必须显式重设 bottom 值才能避开系统导航栏。
正确写法是：
-
bottom: env(safe-area-inset-bottom)—— 现代环境 -
bottom: 0—— 必须放在前面，作为 fallback - 同样需要包裹在
@supports块里，否则旧安卓 WebView 可能报Invalid property value
注意：不要混用 calc() 和乘除运算，bottom: calc(env(safe-area-inset-bottom) * 2) 在所有浏览器中都无效；加减可以，比如 calc(env(safe-area-inset-bottom) + 4px) 是安全的。
最易被忽略的一点：viewport meta 必须同时满足 initial-scale=1 和 viewport-fit=cover，缺一不可。哪怕只漏掉 initial-scale=1，iOS Safari 就会静默禁用所有 env() 安全区变量——连控制台都不会报错。
