虚拟键盘打开时，如何让Safari的布局视口匹配视觉视口？

下面是几个针对Safari的可行方案，能实现类似Chrome中interactive-widget=resizes-content的效果：

• 动态修改viewport参数
  先设置基础viewport：

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

  通过监听输入框的focus和blur事件，结合window.innerHeight的变化判断键盘状态，动态调整viewport的height值：

  const viewportMeta = document.querySelector('meta[name="viewport"]');
  let originalViewportContent = viewportMeta.content;
  
  function adjustViewportForKeyboard() {
    const keyboardHeight = window.screen.height - window.innerHeight;
    if (keyboardHeight > 0) {
      // 键盘弹出时，将视口高度设为当前可见高度
      viewportMeta.content = `${originalViewportContent}, height=${window.innerHeight}`;
    } else {
      // 键盘收起时恢复原配置
      viewportMeta.content = originalViewportContent;
    }
  }
  
  // 绑定输入框聚焦/失焦事件
  document.querySelectorAll('input, textarea').forEach(el => {
    el.addEventListener('focus', adjustViewportForKeyboard);
    el.addEventListener('blur', adjustViewportForKeyboard);
  });
  
  // 监听窗口resize事件（部分场景键盘弹出会触发resize）
  window.addEventListener('resize', adjustViewportForKeyboard);
  

• 利用Visual Viewport API
  Safari支持window.visualViewport，可以监听其尺寸变化，直接调整页面容器高度，避免布局视口滚动：

  const mainContainer = document.querySelector('#app-container');
  
  window.visualViewport.addEventListener('resize', () => {
    mainContainer.style.minHeight = `${window.visualViewport.height}px`;
    // 确保当前聚焦的输入框处于可视区域内
    const activeElement = document.activeElement;
    if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
      activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  });
  

  同时给页面容器设置overflow: auto，让内容在容器内滚动而非整个视口滚动。

• 优化定位元素
  避免position: fixed元素在键盘弹出时错位，可改用position: sticky，或者动态调整fixed元素的底部位置：

  .fixed-footer {
    position: fixed;
    bottom: 0;
    transition: bottom 0.3s;
  }
  

  结合前面的键盘监听逻辑，当键盘弹出时给fixed元素设置bottom: ${keyboardHeight}px，收起时恢复bottom: 0。

注意：Safari在不同iOS版本中对键盘的处理有细微差异，建议多版本测试验证效果。

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