根本原因是环境未配齐：必须添加viewport-fit=cover元标签，仅ios 11.2+及部分新版chrome/edge支持，android webview基本不支持，且需用calc(16px + env(safe-area-inset-bottom, 0px))写法并提供fallback。
padding-bottom: env(safe-area-inset-bottom) 为什么没生效
根本原因不是写错了，而是环境没配齐。iOS Safari 默认不暴露安全区变量，env(safe-area-inset-bottom) 返回 0px 或直接被忽略，属于正常行为。
必须同时满足三个条件：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">—— 缺这个，系统就按“裁剪安全区”模式渲染，变量压根不会注入 - 仅 iOS 11.2+ 和部分新版 Chrome/Edge 移动版支持；Android WebView 基本不认
env() - 不能直接写
padding-bottom: env(safe-area-inset-bottom);—— 没 fallback，不支持的浏览器会丢掉整条声明，底部直接塌陷
正确的 calc() + fallback 写法长什么样
推荐这一行，复制就能用：
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
说明：
-
16px是基础留白（适配普通机型或内容呼吸感），可按设计稿调整 -
env(safe-area-inset-bottom, 0px)的第二个参数0px是 fallback，确保老设备或 Android 下不崩 - 不要拆成两行写（比如先写
padding-bottom: 16px;再覆盖），CSS 层叠规则下 fallback 可能被意外跳过 - 如果底部是固定高度导航栏（如 60px），建议统一用
calc(60px + env(safe-area-inset-bottom, 0px))，而不是只补安全区
为什么不能用 getComputedStyle 读 safe-area-inset-bottom
因为 env() 是 CSS 运行时环境变量，不是计算后的值。JS 拿到的是字面量字符串 "env(safe-area-inset-bottom, 0px)"，不是像素数字。
常见错误写法：
getComputedStyle(el).paddingBottom // 返回 "calc(16px + env(safe-area-inset-bottom, 0px))"
后果：无法做逻辑判断、无法动态调整滚动锚点、无法响应键盘弹出。
替代方案（真需要 JS 响应）：
- 监听
resize事件，粗略判断键盘：当screen.height - window.innerHeight > 100时认为键盘弹出 - 把值映射到 CSS 自定义属性：
document.documentElement.style.setProperty('--safe-bottom', 'env(safe-area-inset-bottom, 0px)')，再用getComputedStyle读--safe-bottom—— 但注意它仍是字符串，仍需自己解析 fallback - 更稳的做法：放弃读取，用 CSS 控制一切；JS 只负责开关类操作（比如键盘弹出时临时切 footer 为
position: absolute）
padding-bottom 加了还是被 Home Indicator 遮住？
常见于 flex 布局容器里子元素没设 margin-bottom，或父容器漏了 overflow: hidden，导致内容溢出覆盖到底部区域。
检查这几处：
- 是否给最外层内容容器（如
.main或#app）加了padding-bottom？别只加在body上，第三方库可能重置样式 - 是否用了
flex: 1或min-height: 100vh？这些在 iOS Safari 中受 visualViewport 影响，高度计算不准，优先用height: 100%配合父级display: flex - 底部固定元素本身是否加了
padding-bottom？错——应该加在它的兄弟容器（即内容区）上，否则内容仍会被盖 - 真机调试必须连 Safari 开发者工具，模拟器里
env(safe-area-inset-bottom)常返回0，不代表线上失效
事情说清了就结束。最常漏的是 viewport-fit=cover 元标签和 calc() 里的 fallback，这两处一错，iPhone X+ 用户第一眼就看到按钮被横条盖住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
