iPhone键盘遮挡输入框问题详解

问题描述

在 iPhone（尤其是 iOS 系统）上访问网页表单时，当用户点击输入框唤出虚拟键盘，页面视口（viewport）会发生变化，但有时输入框仍被键盘遮挡，导致用户无法看到自己正在输入的内容。

这个问题在 Safari 浏览器中尤为常见，主要由于 iOS 对 viewport 的处理方式与其他平台不同。

原因分析

• iOS 不会自动滚动到聚焦的输入框位置（尤其在 fixed 布局下）
• 页面高度在键盘弹出后未被正确识别
• 使用了 position: fixed 或 vh 单位导致布局错乱

解决方案

以下是几种经过验证的有效方法：

1. 使用 JavaScript 自动滚动

// 监听 focus 事件，滚动到输入框位置
document.querySelectorAll('input, textarea').forEach(el => {
  el.addEventListener('focus', () => {
    setTimeout(() => {
      el.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }, 300);
  });
});

2. 避免使用 100vh

改用 min-height: 100dvh（动态视口单位）或 JavaScript 动态设置高度。

3. 添加 viewport 元标签

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

其中 viewport-fit=cover 可帮助适配 iPhone X 及以上机型的安全区域。

互动演示

尝试在 iPhone 上点击下方输入框，观察是否被键盘遮挡（建议真机测试）：

最佳实践建议

• 所有输入框使用 font-size: 16px 避免 iOS 自动缩放
• 避免将表单放在 position: fixed 容器中
• 使用 scrollIntoView 确保输入框可见
• 在 iOS 真机上充分测试表单交互