viewport-fit=cover 是硬性前提，必须与 width=device-width 共存才能启用安全区计算；padding-bottom 需双写 constant() 和 env() 且顺序不可颠倒；fixed 元素避让必须用 padding 而非 margin；灵动岛适配需 JS 动态监听 resize 和 orientationchange。
viewport-fit=cover 是硬性前提，不加就拿不到安全区值
没加 viewport-fit=cover，env(safe-area-inset-bottom) 和 constant(safe-area-inset-bottom) 永远返回 0px——不是 CSS 写错，是浏览器压根没启用安全区计算。这个标签必须和 width=device-width 同时存在，缺一不可。
常见错误配置：
-
<meta name="viewport" content="viewport-fit=cover">→ 单独写无效，layout viewport 宽度未设，浏览器直接忽略 -
<meta name="viewport" content="width=device-width, viewport-fit=contain">→contain不触发 env()，安全区变量全为 0 -
<meta name="viewport" content="width=375, initial-scale=1.0, viewport-fit=cover">→ 固定宽度会破坏设备逻辑像素读取，导致安全区计算错乱
正确写法（顺序无关，但必须共存）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
padding-bottom 必须双写 constant() + env()，且顺序不能反
灵动岛（Dynamic Island）出现在 iPhone 14 Pro 及后续机型，其底部安全区高度动态变化，safe-area-inset-bottom 值可能在 0px～80px 之间浮动。只写一个函数，必然漏兼容：
立即学习“前端免费学习笔记（深入）”；
- iOS 11.0–11.1：仅识别
constant()，env()解析失败 - iOS 11.2+ / Chrome 76+ / Safari 11.2+：只认
env()，constant()被忽略 - Android 部分 WebView（如 Samsung Internet 22+）：支持
env()，但对constant()无响应
正确写法（两条独立声明，后写的生效）：
padding-bottom: constant(safe-area-inset-bottom);<br>padding-bottom: env(safe-area-inset-bottom);
注意：padding-bottom: env(...), constant(...) 是非法语法，会整条声明失效。
fixed 元素避让必须用 padding，不是 margin
给吸底的 tabbar 或操作栏加 margin-bottom 看似合理，实际无效——margin 不撑开父容器，内容仍可能溢出到非安全区；只有 padding 能真正预留可显示空间。
- 错误：对父容器设
margin-bottom: env(safe-area-inset-bottom) - 正确：对 fixed 元素自身设
padding-bottom，或对其直接父容器设padding-bottom - 顶部适配同理：对
<body>或根容器设padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);
另外，calc(100vh - env(safe-area-inset-bottom)) 这类写法要谨慎——env() 返回的是带单位的长度值（如 34px），不能和无单位数值混算；且部分安卓 WebView 对 vh 在 cover 模式下计算不准，建议优先用 dvh 替代。
灵动岛适配需监听 resize + orientationchange 动态校验
灵动岛的高度随系统状态实时变化（比如来电、录音、AirDrop 弹窗），env(safe-area-inset-bottom) 值并非静态。仅靠 CSS 初始化无法覆盖所有场景。
- 单纯依赖 CSS 会导致横屏时底部留白过多，或竖屏弹出灵动岛时按钮被遮挡
- 微信小程序内嵌 H5 中，iOS 16.4+ 的灵动岛行为更激进，部分版本会临时扩大
safe-area-inset-bottom到 80px+ - 推荐用 JS 监听
resize和orientationchange，读取getComputedStyle(document.documentElement).getPropertyValue('padding-bottom')并做日志埋点，确认是否实时更新
最易被忽略的一点：@supports (padding-bottom: env(safe-area-inset-bottom)) 只能说明当前环境支持该函数，不代表返回值非零——横屏时 safe-area-inset-bottom 就可能是 0px，不能用它替代真实值检测。
