env()必须配fallback，否则老浏览器直接丢掉整条声明：需前置写padding-bottom: 16px;再覆盖padding-bottom: env(safe-area-inset-bottom);viewport-fit=cover meta必不可少，@supports检测须用正确语法。
env()必须配fallback，否则老浏览器直接丢掉整条声明
写 padding-bottom: env(safe-area-inset-bottom) 本身没问题，但不加 fallback 的话，iOS 11.1、Chrome Android、微信内置WebView 这些不支持 env() 的环境会忽略该行，退回到继承值或默认的 0，结果就是底部按钮被 Home Indicator 遮住。必须写成两行：
-
padding-bottom: 16px;（fallback 值，确保有基本留白） -
padding-bottom: env(safe-area-inset-bottom);（覆盖式生效）
注意：fallback 值不能是 0，也不能依赖父级继承；它得是能真实起效的最小安全值，比如 16px 或 20px。
别用 margin 模拟安全区留白，padding 才是正确语义
有人试过 margin-bottom: env(safe-area-inset-bottom)，结果发现元素整体上移、脱离底部边界——因为 margin 是推远容器，而安全区适配的本质是“在内容区内预留可点击空间”，不是把整个盒子挪开。
-
padding会撑开盒模型内部空间，不影响定位锚点（bottom: 0仍贴底） -
margin会让position: fixed元素的计算位置偏移，尤其在 flex 容器或overflow: hidden场景下容易出布局断裂 - 如果用了
box-sizing: border-box，padding还不会撑大总高度
@supports 检测要写对，且必须包裹完整声明
只写 @supports (env(safe-area-inset-bottom)) 是无效语法，浏览器会直接跳过整个规则块。真正起作用的是属性+值的组合判断：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
@supports (padding-bottom: env(safe-area-inset-bottom)) - ❌ 错误：
@supports (env(safe-area-inset-bottom))（函数不能单独作为条件） - ❌ 错误：
@supports (-webkit-safe-area-inset-bottom: 0)（已废弃，且非标准）
iOS 11.2 之前连 @supports 都不支持，所以 fallback 必须前置写死，不能只靠检测块兜底。
env() 只在 viewport-fit=cover 下生效，别忘了 meta 设置
即使 CSS 写对了，如果页面没声明 viewport-fit=cover，env() 四个变量全为 0，等同于没适配。必须在 <head> 里加上：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
注意：viewport-fit=cover 在 iOS Safari 中启用安全区，在其他平台多数被忽略，但不加它，iOS 就永远拿不到非零的 safe-area-inset-* 值。Android WebView 和大部分桌面浏览器无视该参数，也不报错——所以它是个无害的必要开关。
最常被忽略的一点：env() 不是“让背景延伸到边缘”的工具，而是“告诉 CSS 当前设备哪块区域不能放可点击内容”。所有 padding 调整，最终都要回归到交互层验证——真机上点一下底部 TabBar，看手指是否真能触达，而不是只盯着 DevTools 里的数值。
