iPhone 键盘挡住输入框？一文解决！

在 iPhone 上浏览网页或使用 Web App 时，经常遇到点击输入框后弹出的虚拟键盘遮挡了输入区域，导致用户无法看到自己正在输入的内容。这不仅影响体验，还可能造成误操作。本文将为你详细解析原因并提供多种实用解决方案。

为什么会出现这个问题？

• iOS 的 Safari 浏览器在弹出键盘时不会自动滚动到输入框可见位置（尤其在 fixed 布局下）。
• 页面使用了 position: fixed 或 viewport 高度计算不当。
• 未监听软键盘事件，缺乏动态调整视口的逻辑。

解决方案汇总

1. 使用 JavaScript 自动滚动到输入框

在输入框获得焦点时，用 scrollIntoView 方法将其滚动到可视区域：

document.querySelectorAll('input, textarea').forEach(el => {
  el.addEventListener('focus', () => {
    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
  });
});

2. 避免使用 position: fixed 布局

fixed 元素在 iOS 键盘弹出时容易错位。建议改用 position: absolute 或基于 flex 的布局。

3. 动态调整 body 高度（进阶）

通过监听窗口 resize 事件判断键盘是否弹出，并临时调整页面高度或滚动位置。

4. 使用 meta 标签优化 viewport

确保 viewport 设置合理，避免缩放干扰：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

总结

虽然 iOS 对软键盘的处理不如 Android 灵活，但通过合理的前端代码和布局策略，完全可以规避“键盘遮挡输入框”的问题。建议在移动端项目中提前测试并加入上述兼容逻辑。