iPhone Safari 中 fixed 底部输入框 + 软键盘问题？如何解决？

⚡ 速记答案（30 秒）

问题：软键盘弹出时 viewport 高度变化，fixed 元素位置错乱或被遮挡。方案：避免输入框使用 fixed，改用 absolute + JS 监听 focus/blur 调整位置；用外层容器 + padding-bottom；使用 visualViewport API。

📖 详细讲解

标准面试回答（推荐记住）

这是 iOS Safari 的经典问题。软键盘弹出时，viewport 高度会变化，但 fixed 定位是相对于原来的视口，导致底部输入框可能被键盘遮挡或位置错乱。解决方案有几种：第一是避免对输入框使用 fixed，改用 absolute 加 JS 监听 focus 和 blur 事件动态调整位置；第二是用外层容器包裹，键盘弹出时加 padding-bottom 或滚动到可视区域；第三是使用 visualViewport API 获取真实可视区域高度；第四是依赖 WebView 的原生配置。

问题场景

iOS Safari 软键盘弹出
fixed 定位失效
输入框被遮挡

解决方案

避免 fixed：改用 absolute + 滚动容器
JS 监听焦点：focus 时调整位置
visualViewport API：获取真实视口高度

✅ 面试要点

•理解 iOS 软键盘导致的问题
•知道 visualViewport API
•掌握常见解决思路

💻 代码示例

监听软键盘解决方案

// 使用 visualViewport API
if (window.visualViewport) {
  window.visualViewport.addEventListener('resize', () => {
    const height = window.visualViewport.height;
    // 调整容器高度或输入框位置
    document.querySelector('.chat-input')
      .style.bottom = `${window.innerHeight - height}px`;
  });
}

// 滚动到输入框可见
document.querySelector('input').addEventListener('focus', () => {
  setTimeout(() => {
    document.querySelector('input').scrollIntoView({ 
      behavior: 'smooth',
      block: 'center'
    });
  }, 300);
});