iPhone X上SPA底部导航被Safari地址栏遮挡，如何适配？

问题核心原因 #

你的适配问题来自两个关键CSS属性的冲突：

• height: 100vh 在iOS Safari中计算的是包含浏览器工具栏的全屏高度，并非用户实际能看到的可视区域高度，导致内容被地址栏/底部工具栏遮挡。
• overflow: hidden 会强制容器忽略系统安全区域的适配规则，直接屏蔽了env(safe-area-inset-bottom)的作用。

具体解决方案 #

1. 替换固定视口单位，启用安全区域内边距 #

修改.App的CSS规则，用动态视口单位替代100vh，同时移除overflow:hidden让安全区域内边距生效：

.App {
  text-align: center;
  color: white;
  /* 用dvh替代100vh：动态视口高度，自动适配Safari工具栏状态 */
  height: 100dvh;
  /* 用100%替代100vw，避免横向滚动问题 */
  width: 100%;
  /* 应用底部安全区域内边距 */
  padding-bottom: env(safe-area-inset-bottom);
  /* 若需要内容滚动，设置为overflow:auto */
  overflow: auto;
}

2. 兼容旧版iOS（iOS < 15.4） #

如果需要支持不兼容dvh的旧系统，用@supports做降级处理：

.App {
  text-align: center;
  color: white;
  height: 100vh;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
  overflow: auto;
}

/* 对支持dvh的设备覆盖vh设置 */
@supports (height: 100dvh) {
  .App {
    height: 100dvh;
  }
}

极端旧版iOS可配合JS动态计算可视高度：

function updateViewportHeight() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// 初始化+监听窗口变化
updateViewportHeight();
window.addEventListener('resize', updateViewportHeight);
window.addEventListener('orientationchange', updateViewportHeight);

CSS中使用自定义属性：

.App {
  height: calc(var(--vh, 1vh) * 100);
}

3. 保留正确的viewport设置 #

你的viewport meta标签配置正确，继续保留：

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

关键注意事项 #

• 避免使用100vw，改用width:100%防止横向滚动。
• 必须移除overflow:hidden，否则安全区域内边距无法触发生效。

内容的提问来源于stack exchange，提问作者ryguy