viewport-fit=cover是env()生效的硬性前提，不加则iOS上env(safe-area-inset-bottom)恒为0px；必须在meta中完整声明width=device-width、initial-scale=1.0和viewport-fit=cover，缺一不可。
viewport-fit=cover 是 env() 生效的硬性前提
不加这个 meta 声明，env(safe-area-inset-bottom) 在 iOS 设备上永远返回 0px，不是 fallback 失效，而是整个函数被忽略。必须在 <head> 中完整写入：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
漏掉任意一项（比如只写 initial-scale=1 却没写 width=device-width）都可能导致 WebView 回退到默认的 viewport-fit=auto，此时安全区变量全为 0。
- 微信内置浏览器（8.0.22 之前）、部分企业微信 WebView 可能无视该声明，需用 JS 检查
document.querySelector('meta[name="viewport"]').content实际值 - 小程序虽默认
cover，但低版本基础库或自定义 WebView 场景下仍可能被覆盖，建议真机验证 - 安卓部分旧版 WebView（如 UC）会直接忽略
viewport-fit，此时env()返回 0，不影响布局，但也不起作用
constant() 和 env() 必须按顺序双写，不能颠倒
旧版 iOS（11.1 及更早）只认 constant()；11.2+ 已废弃它，只支持 env()。CSS 层叠规则决定了后声明的会覆盖前一个，所以必须：
padding-bottom: constant(safe-area-inset-bottom);<br>padding-bottom: env(safe-area-inset-bottom);
反过来写会导致 iOS 11.1 用户拿到空值，底部内容被 Home Indicator 遮住。
立即学习“前端免费学习笔记（深入）”；
-
constant()已被 Safari 官方标记为废弃，但它仍是兼容旧设备的唯一手段 - 不能写成
padding-bottom: env(safe-area-inset-bottom, 20px)——env()不支持 fallback 参数，那是var()的语法 - 所有
env()和constant()调用都必须出现在calc()内部才能参与运算，单独写height: 50px + env(...)是无效 CSS
@supports 是唯一靠谱的检测方式，UA 判断完全不可信
@supports (padding-bottom: env(safe-area-inset-bottom)) 是唯一能准确识别是否支持该特性的方法。用 UA 字符串判断 iOS 版本会出错，因为：
- iOS 11.2 之前部分固件本身不支持
@supports语法 - 微信小程序基础库版本、WebView 内核版本和系统版本不严格对齐
-
@supports not (...)在 iOS 11.2 以下也无效，不要用
正确结构是：
padding-bottom: 20px;<br>@supports (padding-bottom: env(safe-area-inset-bottom)) {<br> padding-bottom: env(safe-area-inset-bottom);<br> padding-bottom: constant(safe-area-inset-bottom);<br>}
padding-bottom 是最稳妥的落点，别乱用 margin 或 top
对 position: fixed; bottom: 0 的底部栏，直接在其自身加 padding-bottom: env(...)，把内容“顶”上来；对 flex 布局中靠 margin-top: auto 推下来的底部区域，应把 padding-bottom 加在父容器上。
- 千万别对
<html>或<body>直接设padding-bottom，否则整页下移，顶部状态栏区域可能出空白 -
margin-bottom在脱离文档流的元素（如fixed）上无效，top: env(...)只适用于顶部fixed元素，且要配合top: 0作 fallback -
calc(8px + env(safe-area-inset-bottom))在 Safari 15.4 之前不支持，整条声明会被丢弃，如需加间距，先确认目标用户 Safari 版本
最常被忽略的一点：所有 env() 和 constant() 都必须包裹在 calc() 中才能参与数值运算；而 padding-bottom 是目前唯一在各种定位场景下都稳定生效的属性，其他写法容易因滚动、缩放或内核差异导致元素“消失”或错位。
