env() 必须搭配 viewport-fit=cover 才生效，且 constant() 要写在 env() 前以兼容旧版 ios；@supports 是唯一可靠检测方式；env() 必须在 calc() 内使用，padding/margin/bottom 语义不可混用。
env() 必须搭配 viewport-fit=cover 才生效
不加这个声明，env(safe-area-inset-bottom) 在 iOS 设备上直接被忽略，连 fallback 都不会触发。H5 页面必须显式写入 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">；小程序虽然默认是 cover，但部分低版本基础库或自定义 WebView 场景下仍可能失效，建议主动确认。
constant() 和 env() 的顺序不能颠倒
旧版 iOS（如 11.1）只认 constant()，新版（11.2+）已废弃它、只支持 env()。CSS 层叠规则决定了后声明的属性会覆盖前一个——所以必须把 constant() 写在前面，env() 写在后面：
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
反过来写会导致 iOS 11.1 用户拿到空值，底部内容被 Home Indicator 遮住。
@supports 是唯一可靠的特性检测方式
UA 判断 iOS 版本完全不可靠：iOS 11.2 之前有部分设备固件不支持 @supports 本身；而微信小程序基础库版本、WebView 内核版本又和系统版本不严格对齐。正确做法是用 @supports (padding-bottom: env(safe-area-inset-bottom)) 包裹现代语法，并保留默认值作 fallback：
-
padding-bottom: 20px;// 兜底值，适配所有不支持 env/constant 的环境 -
@supports (padding-bottom: env(safe-area-inset-bottom)) { ... }// 只有真正支持的浏览器才进入
注意：@supports not (...) 写法在 iOS 11.2 以下也无效，不要用。
padding、margin、calc() 的语义差异很关键
用错地方会导致滚动异常或元素“消失”：
-
padding-bottom: env(safe-area-inset-bottom)—— 适合容器类元素（如<main></main>），让内部内容自然上移 -
margin-bottom: env(safe-area-inset-bottom)—— 仅用于固定定位的底部栏（如position: fixed; bottom: 0），否则会撑大可滚动区域 -
bottom: calc(env(safe-area-inset-bottom) + 8px)—— 绝对/固定定位推荐写法，明确表达“离屏幕底边距离”，比单纯设bottom: 0更安全
最常被忽略的一点：所有 env() 和 constant() 调用都必须出现在 calc() 内部才能参与运算，单独写 height: 50px + env(...) 是无效 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
