iOS 15 Safari fixed定位全屏内容地址栏最小化底部间隙问题求解

方案1：CSS 动态视口单位适配（优先推荐） #

iOS 15 及以上版本的 Safari 已支持 CSS 动态视口单位 dvh，该单位会自动跟随地址栏、键盘的状态变化更新高度，无需额外JS逻辑。在原有样式基础上补充如下配置即可：

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: fixed;
  inset: 0;
  -webkit-text-size-adjust: 100%;
  /* 新增适配代码 */
  height: 100vh; /* 低版本浏览器降级兼容 */
  height: 100dvh; /* 动态适配当前实际视口高度 */
}

该方案无额外性能损耗，覆盖90%以上的业务场景。

方案2：JS 强制触发视口重绘 #

如果需要兼容更低版本的iOS系统，或者CSS方案在特殊布局下不生效，可以通过监听对应事件手动触发Safari重排视口，强制更新高度计算结果：

// 视口重置逻辑
const resetViewport = () => {
  // 临时偏移滚动位置触发重绘，不会影响用户视觉
  const currentScroll = window.pageYOffset
  window.scrollTo(0, currentScroll + 1)
  window.scrollTo(0, currentScroll)
  // 固定定位容器可手动同步当前实际高度
  document.body.style.height = `${window.innerHeight}px`
}

// 监听输入框失焦（对应键盘收起动作）
document.querySelectorAll('input, textarea').forEach(el => {
  el.addEventListener('blur', resetViewport)
})
// 监听屏幕旋转事件
window.addEventListener('orientationchange', resetViewport)

避坑提醒 #

• 不要在viewport的meta标签中添加height=device-height配置，该配置会固定视口初始高度，无法跟随系统状态更新
• 若使用前端框架，注意排查框架自带的移动端适配逻辑是否和上述方案存在冲突，优先保留动态高度适配逻辑

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