iPhone X底部安全区域适配不生效怎么办？

当时我也卡在这，iPhone X 的底部适配确实挺反直觉的，尤其是动态内容加载后 env(safe-area-inset-bottom) 不生效的问题。

先说结论：你用 getComputedStyle 去读 CSS 变量 --safe-area-inset-bottom 是没用的，因为这个变量不是原生支持的，iOS 并不会自动定义它——你看到的空字符串是正常的。

真正要生效，得同时满足几个条件：

1. 页面 head 里必须加这个 meta 标签（别漏了）：


2. CSS 里不能只写 env(safe-area-inset-bottom) 就完事，得配合 constant() 兼容旧版（虽然 iOS12+ 基本都支持 env 了，但写上更稳妥）：

body {

  padding-bottom: constant(safe-area-inset-bottom);

  padding-bottom: env(safe-area-inset-bottom);

}

3. 最关键的一点：你页面的根元素（html 或 body）必须有 height: 100% 或 min-height: 100vh，否则 safe-area 不会生效。我之前就是卡在这，以为是 JS 问题，其实布局没撑开，浏览器根本没计算安全区域。

动态加载内容后不生效？大概率是你新插入的元素没继承到 padding，或者用了 position: fixed 但没加 bottom: env(safe-area-inset-bottom)。比如底部固定导航栏，应该这么写：

.fixed-footer {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  padding-bottom: constant(safe-area-inset-bottom);

  padding-bottom: env(safe-area-inset-bottom);

}

别再用 JS 去读 --safe-area-inset-bottom 了，这玩意儿浏览器没定义。真要动态适配，直接用 window.visualViewport?.height 或监听 resize 事件算差值更靠谱，不过大部分情况 CSS 方案就够了。

最后提醒一句：iOS 14.5+ 之后有些机型（比如 iPhone 12 mini）的 Home Indicator 位置会微调，但 env(safe-area-inset-bottom) 基本能覆盖，除非你遇到特别怪的 case，再单独调试。

你这问题我太熟悉了，iPhone X 底部安全区不生效，基本就是三类坑：viewport meta 没配、CSS 没用对、或者动态内容没触发重新计算。

先看 viewport meta，必须加 viewport-fit=cover，否则浏览器不会把 safe-area-inset 暴露出来：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

很多人漏了这个，光写 initial-scale，结果 safe-area 全是 0。

然后是 CSS 用法。别用 JS 去读 --safe-area-inset-bottom 这种自定义变量，它压根不是默认存在的，浏览器只认 env(safe-area-inset-bottom)。正确写法是：

body {

  padding-bottom: env(safe-area-inset-bottom);

}

或者更稳妥点，加个 fallback：

body {

  padding-bottom: max(10px, env(safe-area-inset-bottom));

}

动态内容加载后不生效？大概率是你用 JS 操作 DOM 时没触发重绘，或者用了 position: fixed 但没挂 bottom: env(...)。

比如底部导航栏：

.fixed-bottom-bar {

  position: fixed;

  bottom: 0;

  padding-bottom: env(safe-area-inset-bottom);

  left: 0;

  right: 0;

}

注意 padding-bottom 和 bottom 要配合用，别只写一个。

最后，如果你用的是 Vue/React 这类框架，动态插入的节点如果没加 class 或样式没挂上，也白搭。建议在根节点上统一加个 safe-area 类，用 CSS 变量兜底：

.safe-area {

  padding-bottom: env(safe-area-inset-bottom, 0);

}

JS 里别折腾读 safe-area 值了，直接用 CSS 的 env() 就够了，又快又稳，连 layout thrashing 都省了。我以前也纠结过要不要算一遍偏移量，后来发现纯 CSS 就能搞定，何必多写那几十行 JS 去测高度呢。