iPhone 键盘下方空白问题详解与解决方案

在使用 iPhone 浏览网页或操作某些 App 时，你是否遇到过键盘弹出后下方留有一块空白区域的问题？这不仅影响美观，还可能导致内容被遮挡或布局错乱。本文将深入解析原因并提供实用解决方案。

问题现象

当用户在 iPhone 的 Safari 或 WebView 中聚焦输入框（如 <input> 或 <textarea>）时，虚拟键盘会弹出。但在部分机型（尤其是带“刘海”或“灵动岛”的 iPhone）上，页面底部可能出现一段无法利用的空白区域，即使页面内容已滚动到底部。

根本原因

iOS 系统为避免内容被圆角、传感器区域或 Home Indicator 遮挡，引入了 安全区域（Safe Area） 概念。
当键盘弹出时，Safari 的视口（viewport）高度发生变化，但未正确处理安全区域偏移量（safe-area-inset-bottom），导致布局计算错误。
若网页未声明支持扩展到安全区域外，系统会强制保留底部内边距，形成“空白”。

解决方案

1. 设置正确的 viewport meta 标签

在 HTML 的 <head> 中添加 viewport-fit=cover：

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

2. 使用 CSS 安全区域环境变量

通过 env(safe-area-inset-bottom) 动态调整底部间距：

.input-container {
  padding-bottom: env(safe-area-inset-bottom);
}

这样可确保内容不会被 Home Indicator 遮挡，同时避免多余空白。

3. JavaScript 动态监听键盘（可选）

虽然 iOS 不提供标准键盘事件，但可通过监听窗口尺寸变化间接判断：

window.addEventListener('resize', () => {
  if (window.innerHeight < document.documentElement.clientHeight * 0.7) {
    // 可能键盘已弹出，可执行滚动或布局调整
    console.log('键盘可能已弹出');
  }
});

注意：此方法不精确，仅作辅助参考。

最佳实践建议

始终在 viewport 中加入 viewport-fit=cover。
对底部固定元素（如聊天输入框、工具栏）使用 padding-bottom: env(safe-area-inset-bottom)。
避免使用 100vh 高度，改用 100dvh（动态视口高度）或 JavaScript 计算实际可用高度。

结语

iPhone 键盘下方空白问题源于 iOS 对安全区域的严格管理。通过合理使用 viewport 设置与 CSS 环境变量，开发者可以有效规避此问题，提升移动端用户体验。