必须同时设置 viewport-fit=cover 和 env(safe-area-inset-bottom) 才生效；缺 viewport-fit=cover 时 iOS Safari 不注入该变量，env() 恒返回 0px，真机 padding 无效，仅 DevTools 模拟正常。
为什么只写 env(safe-area-inset-bottom) 没反应？
因为 iOS Safari 不注入这个变量——除非你在 <meta> 里明确写了 viewport-fit=cover。漏掉它，env(safe-area-inset-bottom) 就永远返回 0px，真机上 padding 完全无效，DevTools 模拟器却可能“骗你”显示正常。
必须同时满足两个条件：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">（缺一不可） - 样式中使用
padding-bottom: env(safe-area-inset-bottom)或类似写法
微信、QQ 等 WebView 可能根本不支持 viewport-fit，此时整个机制失效，env() 被直接忽略。
padding-bottom 和 margin-bottom 哪个该用？
选哪个取决于元素定位方式和布局目标：
立即学习“前端免费学习笔记（深入）”；
- 对普通块级容器（如
<main></main>、<footer></footer>）：用padding-bottom: env(safe-area-inset-bottom)，内容自然上浮，不破坏文档流 - 对
position: fixed; bottom: 0的 tabbar：不能直接写margin-bottom: env(safe-area-inset-bottom)，否则会额外增加滚动高度，导致手指一滑按钮就“掉出”视口 - 如果非要控制 fixed 元素离底边的净距离（比如固定留 8px），得写成
bottom: calc(8px + env(safe-area-inset-bottom))，但注意 Safari 15.4 之前不支持单位混合运算，整条声明会被丢弃
如何安全 fallback 并检测支持性？
别靠 UA 字符串判断，微信、飞书、钉钉等容器版本和内核差异太大，JS 判断极易误判或漏判。
唯一可靠方式是用 @supports：
body {
padding-bottom: 56px; /* fallback */
padding-bottom: env(safe-area-inset-bottom, 56px);
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
body {
padding-bottom: env(safe-area-inset-bottom);
}
}注意：env(safe-area-inset-bottom, 56px) 的 fallback 值必须写在函数里，且仅当环境变量未定义时才生效；而 @supports 检测的是浏览器是否“理解并能解析该语法”，不是“是否返回非零值”。
Flex 布局下底部 tab 栏怎么均匀分布又不被遮挡？
常见错误是用 justify-content: space-between —— 奇数项时中间项偏右，视觉不均；更糟的是忘了给主内容加安全间距，导致被 tab 遮住。
正确做法分两层：
- Tab 容器设
display: flex，每个 tab 项设flex: 1+text-align: center，避免固定 width 或 margin-auto - 主内容区域必须加
padding-bottom: env(safe-area-inset-bottom, 56px)（写在前面，被后面覆盖），不能用margin-bottom，它不影响文档流高度 - 若用
height: calc(100vh - 56px)，注意 iOS Safari 地址栏缩放会导致vh跳变，优先选 padding 方案
最常漏的是安全区域适配和 active 态的手势响应——这两处一错，用户第一感觉就是“卡”或者“点不准”。
