safe-area-inset-bottom 在 ios safari 中未生效，因需 viewport-fit=cover 元标签、仅 ios 11.2+ 支持，且须用 calc() + fallback（如 padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px))）；js 无法直接读取，应避免 getcomputedstyle 解析 env()。
safe-area-inset 在 iOS Safari 中为什么没生效
因为 safe-area-inset-bottom 是 CSS 环境变量，不是所有地方都能直接用，尤其在未启用视口元标签或页面未进入“全屏”状态时，它会返回 0px。
- 必须加
<meta name="viewport" content="viewport-fit=cover">，否则 iOS Safari 默认裁剪安全区，不暴露变量 - 只在支持 iPhone X+ 的 Safari（iOS 11.2+）和部分新版 Chrome/Edge 移动版中可用，Android WebView 多数不支持
-
env(safe-area-inset-bottom)不能直接写进内联 style 或 JS 的style.paddingBottom，得走 CSS 自定义属性或 calc() 计算
怎么用 env(safe-area-inset-bottom) 动态加底部 padding
核心是用 calc() 把环境变量接入 padding，同时 fallback 到普通值，避免不支持时塌陷。
- 推荐写法：
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); - 不要写成
padding-bottom: env(safe-area-inset-bottom);—— 没 fallback，老设备会丢掉整个声明 - 如果底部有固定按钮（如提交栏），优先给容器加 padding，而不是给按钮加 margin —— 否则键盘弹出时可能被遮挡
- 用
@supports (padding-bottom: env(safe-area-inset-bottom))做渐进增强，但注意 Safari 对 @supports 检测 env 变量的支持不稳定，建议直接写 fallback
JavaScript 里读不到 safe-area-inset-bottom 怎么办
CSS 环境变量无法通过 getComputedStyle 直接读取，JS 拿不到运行时值，硬查会返回空字符串或 env(...) 字面量。
- 别写
getComputedStyle(el).paddingBottom试图解析env()—— 解析逻辑复杂且不可靠 - 真需要 JS 响应（比如调整滚动锚点），用
window.visualViewport?.height结合屏幕高度粗略估算，或监听resize+ 判断screen.height - window.innerHeight > 100推断键盘是否弹出 - 更稳妥的做法：把 padding 值存在 CSS 自定义属性里，用
document.documentElement.style.setProperty('--safe-bottom', 'env(safe-area-inset-bottom, 0px)')，再在 JS 里读--safe-bottom—— 但注意这仍是字符串，仍需 fallback 处理
padding-bottom 加了却还是被刘海/Home Indicator 遮住
常见于 flex 布局子元素未设 margin-bottom 或父容器未设 overflow: hidden，导致内容溢出覆盖安全区。
- 检查是否用了
position: fixed或absolute的底部元素 —— 它们不受父级 padding 影响，得单独加bottom: env(safe-area-inset-bottom) - 如果容器是
display: flex; flex-direction: column;，确保底部内容项设置了margin-bottom: env(safe-area-inset-bottom)，而不是只靠父容器 padding - iOS 16+ 引入了
scroll-padding-bottom，对scrollIntoView({ block: 'nearest' })有效，可配合使用，但兼容性有限
实际适配时最易忽略的是：不同机型的 safe-area-inset-bottom 值并不统一（iPhone X 是 34px，iPhone 14 Pro 是 47px），而 Home Indicator 高度还会随系统缩放变化。硬编码像素值或只测一台机，大概率漏掉边缘 case。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
