必须先写constant再写env，因ios 11.2及更早版本仅识别constant()而忽略env()，ios 11.3+则弃用constant()、采用env()；顺序颠倒将导致旧版无回退，且须配合@supports或检测及viewport-fit=cover才完整生效。
直接写 env(safe-area-inset-bottom) 不够，必须搭配 constant(safe-area-inset-bottom) 做双重声明，且顺序不能错——constant 必须写在 env 前面，否则 iOS 11.2 及更早版本会完全忽略。
为什么 constant 必须写在 env 前面
CSS 层叠规则决定了后声明的值会覆盖前声明的值，但前提是浏览器能识别它。iOS 11.2 只认 constant()，遇到不认识的 env() 就当无效值跳过；而 iOS 11.3+ 开始弃用 constant()、只支持 env()，此时它会忽略前面的 constant 声明，采用后面的 env 值。
所以正确顺序是：
.footer {
padding-bottom: constant(safe-area-inset-bottom); /* iOS ≤ 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* iOS ≥ 11.3, Safari 11.1+ */
}
- 写反了（
env在前、constant在后），iOS 11.2 就彻底没 fallback - 只写
env，等于放弃对 iOS 11.2 及更旧版本的支持 - 只写
constant，Safari 15.4+ 会警告并丢弃该声明（控制台可见Unsupported CSS value）
@supports 检测不是可选，而是必须加
单纯靠双重声明还不够。某些安卓 WebView 或老旧桌面内核（如 Electron 旧版）会把 constant() 当作语法错误直接阻断整条 CSS 规则解析，导致后续 env() 也不生效。
必须用 @supports 包一层，确保只有真正支持的环境才加载这些声明：
@supports (padding-bottom: env(safe-area-inset-bottom)) or (padding-bottom: constant(safe-area-inset-bottom)) {
.footer {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}
- 不加
@supports，部分 Android 7.x 系统 WebView 会静默失败 - 不能只检测
env：iOS 11.2 不支持@supports (padding-bottom: env(...))，会整个块被跳过 - 必须用
or连接两个函数，兼容性覆盖才完整
padding-bottom 是首选，别乱用 margin-bottom
用 margin-bottom: env(safe-area-inset-bottom) 看似简单，但会导致页面可滚动高度异常增大，用户上滑时底部按钮突然“掉出”可视区——因为 margin 推开的是整个元素盒模型，而不是容器内部内容。
适用场景和写法要严格区分：
-
padding-bottom：用于<main></main>、<footer></footer>这类容器，让内容自然避开安全区 -
margin-bottom：仅限position: fixed; bottom: 0的 tabbar，且必须配合calc()：margin-bottom: calc(env(safe-area-inset-bottom) + 8px) -
bottom直接设env()：仅用于position: absolute元素，且父容器不能有transform或will-change，否则 iOS 渲染失效
viewport-fit=cover 是前提，否则 env() 根本不触发
env(safe-area-inset-bottom) 不是“只要写了就返回数值”，它依赖视口是否扩展到底栏下方。没配 viewport-fit=cover，iOS Safari 就不会提供这个值——此时 env() 返回 0，你看到的“没效果”其实是配置缺失。
正确的 <meta> 标签必须包含：
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- 漏掉
viewport-fit=cover，所有 env 声明都白写 - 加了
user-scalable=no会强制禁用viewport-fit=cover（Safari 隐藏规则） - 安卓 Chrome 不需要
viewport-fit也能读取env()，但 iOS 必须有
最常被忽略的一点：真机测试前，务必确认 viewport 标签已生效——开发工具模拟器有时会假装支持，但真机上一跑就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
