viewport-fit=cover是启用安全区变量的必要前提，必须在meta标签中显式声明；padding-bottom需按constant()在前、env()在后的顺序双写以兼容iOS各版本；适配应使用padding而非margin，且calc()中避免rpx等非标准单位。
viewport-fit=cover 是前提，不是可选项
不加这个，env(safe-area-inset-bottom) 和 constant(safe-area-inset-bottom) 全部无效——浏览器根本不会计算安全区值。很多页面写了 padding 却没效果，卡在这一步。
必须写成：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
注意：viewport-fit=cover 会让内容铺满物理屏幕，顶部/底部可能被遮挡。这不是 bug，是启用安全区变量的必要代价。别用 contain 或漏掉它。
- 微信小程序 WebView 默认是
cover，但 H5 页面必须显式声明 - 安卓 Chrome 76+、iOS Safari 11.0+ 支持
viewport-fit=cover；旧版 WebView（如 Android 4.4）会忽略该属性，但也不会报错 - 真机调试时，Safari 开发者工具里检查
document.documentElement.style，确认viewport-fit已生效
padding-bottom: env() 和 constant() 必须共存，且顺序不能反
只写 env()，iOS 11.0–11.1 会失效；只写 constant()，iOS 11.2+ 及所有现代浏览器直接忽略。CSS 层叠规则决定了：后写的声明覆盖前一个，所以 constant() 必须在前，env() 在后。
立即学习“前端免费学习笔记（深入）”；
正确写法：
body {
padding-bottom: constant(safe-area-inset-bottom); /* iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* iOS >= 11.2, modern browsers */
}错误写法（顺序颠倒）：
body {
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: constant(safe-area-inset-bottom); /* 这行永远不生效 */
}- 不支持
env()的浏览器（如旧版 Android WebView）会跳过整条声明，退回到上一条有效值；不支持constant()的则跳过第一行，用第二行 - 不能靠 UA 判断版本来条件加载样式——UA 字符串不可靠，且 iOS 11.2 beta 就已废弃
constant() - @supports 检测
env()本身在 iOS 11.2 之前也不支持，所以双重声明是最小可行兼容方案
calc() 用于叠加偏移时，单位混用要小心
想让底部栏离屏幕底边留 8px，同时避开黑条，写成 padding-bottom: calc(8px + env(safe-area-inset-bottom)) 看似合理，但有陷阱。
env() 返回的是带单位的长度值（如 34px），和 8px 相加没问题；但如果你写成 calc(8rpx + env(safe-area-inset-bottom))，在非小程序环境（比如纯 H5）中 rpx 不被识别，整条声明会被丢弃。
- H5 场景统一用
px或rem（确保根字体大小稳定），避免rpx—— 它是小程序私有单位 - 需要响应式留白时，用
vmin更稳妥，例如calc(1vmin + 8px)，比1rem不易受系统字体缩放干扰 - 不要在
calc()里做除法或复杂比例，如calc(100% / 3.75)，低端 Android 浏览器可能因浮点精度四舍五入出错
margin-bottom vs padding-bottom：语义错了就白适配
用 margin-bottom: env(safe-area-inset-bottom) 推开整个页面内容？结果手指上滑时底部按钮突然“掉进”黑条下方看不见——这是典型误用。
margin 会扩大容器的可滚动区域，而 padding 是在容器内部留空，不改变滚动边界。安全区适配的本质是「内容避让」，不是「整体位移」。
- 对
<footer></footer>、<main></main>这类容器，一律用padding-bottom - 对
position: fixed; bottom: 0的 tabbar，用bottom: calc(env(safe-area-inset-bottom) + 8px)，而不是margin-bottom - 绝对定位元素（
position: absolute）优先用inset或bottom: calc(...)，避免设bottom: 0后再靠 margin 补救
最易被忽略的一点：安全区变量在桌面浏览器或不支持的移动端中会被静默忽略，你写的 fallback 值（比如 padding-bottom: 16px）必须真实可用——它不是摆设，而是兜底的实际体验。
