iOS Safari虚拟键盘弹出时resize事件触发延迟方案咨询

iOS 15.5 Safari 中window.resize事件确实会等待虚拟键盘弹出动画完全结束后才触发，相比iOS端Chrome的触发时机晚200-300ms，这是WebKit内核的原生设计逻辑，没有办法直接让原生resize事件提前触发，可通过以下替代方案实现无延迟适配：

方案1：基于focus事件提前触发适配 #

不要完全依赖resize事件作为布局调整的唯一触发源，给所有可输入元素绑定focusin事件，在输入框聚焦、键盘开始弹出的瞬间就执行布局调整逻辑，后续再通过视口事件做高度校准即可。

const ADJUST_TARGETS = 'input, textarea, [contenteditable="true"]';
// 聚焦时立刻触发布局调整
document.addEventListener('focusin', (e) => {
  if (e.target.matches(ADJUST_TARGETS)) {
    updateLayout();
    // 后续视口变化时做一次校准，消除提前计算的高度偏差
    window.visualViewport.addEventListener('resize', updateLayout, { once: true });
  }
});
// 失焦后恢复默认布局
document.addEventListener('focusout', (e) => {
  if (e.target.matches(ADJUST_TARGETS)) {
    setTimeout(updateLayout, 60);
  }
});

方案2：用visualViewport API替代原生resize监听 #

iOS 15+全量支持的visualViewport API的resize事件会在键盘弹出动画过程中实时触发，比window.resize早200ms以上，是目前适配Safari虚拟键盘的最优方案：

• 不要使用100vh作为全屏布局单位，该单位在Safari中不会随虚拟键盘弹出实时更新
• 实时读取window.visualViewport.height作为当前可视区域高度，通过CSS变量注入到布局中
• 底部固定定位元素的偏移量直接读取window.visualViewport.offsetTop计算，不需要额外估算键盘高度

// 布局更新核心逻辑
function updateLayout() {
  const vp = window.visualViewport;
  // 给根元素注入实时视口高度变量
  document.documentElement.style.setProperty('--real-vh', `${vp.height * 0.01}px`);
  // 调整底部固定栏位置
  const bottomBar = document.querySelector('.fixed-bottom');
  if (bottomBar) {
    bottomBar.style.transform = `translateY(-${window.innerHeight - vp.height - vp.offsetTop}px)`;
  }
}
// 绑定视口变化事件，动画过程中会持续触发
window.visualViewport.addEventListener('resize', updateLayout);
window.visualViewport.addEventListener('scroll', updateLayout);
// 初始化执行一次
updateLayout();

对应CSS中可以直接使用注入的变量做高度设置：

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

无效方案避坑 #

• 手动dispatchEvent触发原生resize事件无效：Safari对合成事件不会更新最新的视口尺寸参数，读取到的window.innerHeight仍然是键盘弹出前的旧值
• 写死键盘高度做偏移不可取：不同iOS版本、不同输入法（尤其是第三方输入法）的键盘高度差异极大，写死值会出现大面积布局错位
• 轮询读取视口高度性能差：visualViewport事件本身触发频率足够高，不需要额外加定时器轮询

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