必须显式声明 viewport-fit=cover 才能启用 safe-area-inset-bottom，否则 env() 返回 0；需配合 width=device-width 和 initial-scale=1.0；padding-bottom 应作用于内容容器而非 body；@supports 必须检测属性+值组合并设 fallback；constant() 需前置兼容旧 WebView。
viewport-fit=cover 不加，env(safe-area-inset-bottom) 就是 0
这不是兼容性问题，而是功能开关。iOS Safari 默认 viewport-fit=auto（等价于 contain），此时 WebKit 根本不注入 safe-area-inset-bottom 变量，env(safe-area-inset-bottom) 直接返回 0px，且不报错、不警告——你看到的“没效果”，其实是静默失效。
必须在 <meta name="viewport"> 中显式声明：viewport-fit=cover，且要和 width=device-width、initial-scale=1.0 共存。单独写 viewport-fit=cover 无效。
- 正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 错误写法：
viewport-fit=contain、viewport-fit=auto、或漏掉viewport-fit=cover - 微信小程序基础库 < 2.20.0 的 WebView 可能忽略该配置，需 JS 注入降级 class
padding-bottom: env(safe-area-inset-bottom) 要写在容器上，不是 body
对 <body> 或 <html> 直接设 padding-bottom，会把整个页面下推，顶部状态栏可能被裁切，滚动也容易异常。
真正该加的位置，是承载内容的容器（比如 <main>）或底部固定元素的父容器。如果是 position: fixed; bottom: 0 的导航栏，更推荐用 bottom: calc(env(safe-area-inset-bottom) + 8px)，而不是靠 padding 推动它。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
.tab-bar { position: fixed; bottom: calc(env(safe-area-inset-bottom) + 8px); } - ⚠️ 慎用：
margin-bottom: env(safe-area-inset-bottom)—— fixed 元素脱离文档流，margin 无效 - ❌ 禁止：
body { padding-bottom: env(safe-area-inset-bottom); }
@supports 检测必须写成 padding-bottom: env(...)，不能只检测 env()
@supports (env(safe-area-inset-bottom)) 是语法错误，浏览器直接忽略整条规则。唯一合法写法是检测属性+值组合，且 fallback 值必须提前声明。
iOS 11.2 以下连 @supports 都不支持，所以默认值（如 padding-bottom: 16px）必须写在 @supports 外部，否则老设备空白。
- ✅ 正确：
footer { padding-bottom: 16px; } @supports (padding-bottom: env(safe-area-inset-bottom)) { footer { padding-bottom: env(safe-area-inset-bottom); } } - ❌ 错误：
@supports (env(safe-area-inset-bottom)) { ... }（语法非法） - ❌ 错误：
@supports not (...)（iOS 11.2 以下直接跳过，无 fallback）
constant(safe-area-inset-bottom) 已废弃，但还得留着
constant() 在 iOS 11.2+ 已被废弃，Safari 15.4+ 完全移除支持。但它仍是微信、QQ、钉钉等旧版 WebView 的唯一选择——这些环境可能根本不认识 env()。
写法必须是 constant() 在前、env() 在后，CSS 层叠机制才能自然覆盖：
- ✅ 正确顺序：
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); - ❌ 反序写法会导致旧 WebView 读不到值，新 Safari 用不到 fallback
- ⚠️ 注意：
calc(60px + constant(...))在 iOS 11.2–15.3 有兼容性坑，建议改用max(60px, env(...))或纯 padding
最易被忽略的点：真机测试不可替代模拟器。企业微信、飞书、部分银行 App 内置浏览器会无视 viewport-fit=cover，这时只能靠 UA + 特性检测 + JS 动态加 class 降级。别信 DevTools 里的“iPhone X”预设。
