不支持 env(safe-area-inset-bottom) 的设备会直接忽略整条声明，因此必须将静态 fallback 值（如 padding-bottom: 20px）写在前面，再用 calc(env(...) + 20px) 覆盖，确保所有浏览器均有底部间距。
不支持 env(safe-area-inset-bottom) 的设备（如 iOS 10、IE11、旧版安卓 WebView）会直接忽略整条 CSS 声明，不是“值为 0”，而是根本没解析——所以 fallback 必须独立存在、顺序靠前、且不能依赖任何新语法。
为什么 @supports (padding-bottom: env(safe-area-inset-bottom)) 不可靠
这个检测本身在旧浏览器中就无效：IE11 完全不认识 @supports，整块规则被跳过；而 Safari ≤14.1、部分安卓 WebView 即使写了 @supports，也会因语法识别失败（比如把 env() 当作非法值）导致规则静默失效。更关键的是，@supports 只能检测声明是否“被接受”，不能保证 env() 真的返回了非零值——比如 iOS 15 某些降级模式下，env(safe-area-inset-bottom) 可能返回 0px，但检测仍通过。
- 别写
@supports (safe-area-inset-bottom: 21px)：这不是标准 CSS 属性，浏览器直接报错丢弃整块 - 别依赖 UA 判断 iOS 版本：微信内置浏览器、QQ 浏览器 WebView 常伪造 UA，实测不可靠
- 真机调试时，用
getComputedStyle(document.body).getPropertyValue('padding-bottom')查看返回值，而不是只看是否进了@supports块
正确 fallback 的写法：静态值必须在前，env() 覆盖在后
浏览器从上到下解析 CSS，遇到无法识别的函数（如 env()）会跳过整条声明，继续读下一条。所以必须把兼容性兜底写在前面，再用现代语法覆盖：
body {
padding-bottom: 20px; /* 所有浏览器都认，直屏/老设备也适用 */
padding-bottom: calc(env(safe-area-inset-bottom) + 20px); /* 仅现代支持 env 的设备生效 */
}
-
20px是推荐 fallback 值：比 iPhone X 底部黑条（34px）略小，又比普通底部留白（12px）足够，避免在无刘海设备上多出突兀空白 - 不要用
0或0px作 fallback：iOS 直屏设备（如 iPhone 8）上env(safe-area-inset-bottom)返回0px，若 fallback 是0，叠加后仍是0，可能让底部按钮紧贴屏幕边缘 -
calc()内必须显式写单位：env(safe-area-inset-bottom) + 20px合法，env(...) + 20会失效
fixed 元素被遮挡？别碰 padding-bottom，改用 top/bottom 层叠
padding-bottom 对 position: fixed 元素完全无效——它只影响文档流内内容。底部 TabBar、悬浮按钮这类元素必须通过定位偏移来避让：
.tabbar {
bottom: 0;
bottom: constant(safe-area-inset-bottom); /* iOS 11.0–11.1 */
bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
}
- 顺序不能反：
constant()必须在env()前面，否则 iOS 11.0–11.1 无法 fallback -
constant()已被废弃，但仍是必要兼容层，不写会导致部分老 iOS 设备底部直接被盖住 - 别在 React/Vue 的
style={{ bottom: 'env(safe-area-inset-bottom)' }}里硬塞：JS 不解析 CSS 函数，只会当字符串透传，结果是bottom: "env(safe-area-inset-bottom)"，无效
uni-app 和小程序里特别容易踩的坑
uni-app 的 page 样式作用域和编译时机容易掩盖问题：
- 在
App.vue或pages.json中配置"safeAreaInsetBottom": true，只是告诉框架“我需要适配”，不等于自动注入 CSS —— 你仍需手动写padding-bottom或bottom规则 - 微信小程序基础库
不支持 <code>env()，即使写了@supports也无效；必须用 JS 运行时检测：if (wx.getSystemInfoSync().safeArea?.bottom)动态加 class - uni-app 编译成 H5 时，
env()仅在 iOS Safari 生效，Chrome/Edge 桌面端返回0px，但 fallback 的20px依然起作用——这点反而比原生 Web 更稳
最常被忽略的一点：安全区域适配不是“加个 padding 就完事”，而是要通盘考虑 fixed 元素、100vh 行为、滚动容器高度计算——env() 只提供数值，怎么用它撑开、偏移、缩放，才是真正的兼容难点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
