iOS Safari软键盘弹出时页面高度适配异常问题求解

iOS Safari软键盘弹出时存在特有兼容逻辑：软键盘弹出时不会修改布局视口（layout viewport）的尺寸，只会在页面下层覆盖键盘，默认允许页面滚动到键盘下方的隐藏区域，单纯给<html>标签设置overflow: hidden失效，是因为键盘激活状态下Safari会强制重置根元素的部分滚动、尺寸属性。
以下是经过验证的可落地方案： #

1. 完善视口事件监听逻辑 #

仅监听visualViewport的resize事件覆盖不全场景，Safari键盘弹出/收起、位置变化时还会触发scroll事件，回调中需要同时修正根元素和内容容器的尺寸、偏移，不要仅修改#content的高度：

const adjustLayout = () => {
  const viewport = window.visualViewport;
  const content = document.querySelector('#content');
  // 同步内容容器高度为当前可视视口高度
  content.style.height = `${viewport.height}px`;
  // 强制根元素对齐可视视口顶部，消除底部留白
  document.documentElement.style.transform = `translateY(${viewport.offsetTop}px)`;
  document.documentElement.style.height = `${viewport.height}px`;
  document.body.style.height = `${viewport.height}px`;
};

// 同时绑定两个事件，覆盖键盘弹出、收起、位置变化的所有场景
window.visualViewport.addEventListener('resize', adjustLayout);
window.visualViewport.addEventListener('scroll', adjustLayout);
// 页面初始化时执行一次
window.addEventListener('load', adjustLayout);

2. 配套CSS样式锁死根层滚动 #

不要只给根元素加overflow: hidden，需要配合固定定位彻底收回根元素的滚动权限，把滚动能力交给内部的#content容器：

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  /* 固定定位是iOS下禁止根层滚动的关键 */
  position: fixed;
  overflow: hidden;
  /* 禁止iOS全局回弹效果 */
  overscroll-behavior: none;
  /* 不要写height: 100%/100vh，高度由JS动态赋值 */
}
#content {
  width: 100%;
  /* 内容区单独控制滚动 */
  overflow-y: auto;
  overscroll-behavior: contain;
}

避坑提醒 #

• 不要使用100vh设置容器高度：iOS Safari的100vh单位不会随软键盘弹出重新计算，始终返回屏幕总高度，是底部异常留白的常见诱因
• 如果页面存在输入框，可额外增加聚焦逻辑，避免输入框被键盘遮挡：

document.querySelectorAll('input, textarea').forEach(input => {
  input.addEventListener('focus', () => {
    // 等待300ms让键盘弹出动画完成后再滚动定位
    setTimeout(() => {
      input.scrollIntoView({ block: 'center', behavior: 'smooth' });
    }, 300);
  });
});

参考截图 #

#

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