iOS 网页软键盘不自动上推页面问题全解析 Viewport 机制差异

在移动端开发中，一个极其常见却又让人反复踩坑的问题是：

Android 上软键盘弹起页面会自动上推，而 iOS 上却没有任何反应。

同一套 H5 页面，在 Android Chrome 中表现正常，但在 iOS Safari 或 WKWebView 中，输入框可能被遮挡、底部 fixed 元素错位、100vh 布局失效。这并不是代码写错，而是浏览器底层机制差异导致的行为不同。本文系统梳理 iOS 软键盘相关的所有关键点。

一、核心原因：Viewport 机制差异

移动端浏览器实际上存在两个 Viewport 概念：

Layout Viewport   → 页面布局使用
Visual Viewport   → 用户当前可见区域

Android（Chrome）的行为

• 软键盘弹起
• window.innerHeight 变小
• 触发 resize
• Layout Viewport 被压缩
• 页面自然上推

iOS（Safari / WKWebView）的行为

• 软键盘弹起
• Layout Viewport 不变
• 仅 Visual Viewport 发生变化
• window.innerHeight 不变
• 不触发常规 resize
• 页面不会自动上推

iOS 只改变可视区域，而不改变布局区域，这就是问题的根源。

二、VisualViewport API：理解 iOS 行为的关键

iOS 13+ 开始支持 visualViewport API。

通过它可以获取：

window.visualViewport.height
window.visualViewport.offsetTop

当软键盘弹起时：

• visualViewport.height 会变小
• Layout Viewport 保持不变

这意味着页面本身并没有重新计算布局，只是可见区域被压缩。

解决方法

监听 visualViewport ​的尺寸，在软键盘弹起时，让出区域

if (/iPhone|Mac OS/.test(navigator.userAgent)) {
  window.visualViewport.addEventListener('resize', () => {
    const keyboardHeight = window.innerHeight - window.visualViewport.height;
    document.querySelector('.page').style.bottom = keyboardHeight + 'px';
  });
}

三、iOS 中常见问题场景

1. 输入框被键盘遮挡

因为页面没有被压缩，底部输入框可能完全被覆盖。

2. fixed 元素错位

position: fixed 元素是基于 Layout Viewport 定位，而键盘改变的是 Visual Viewport。

3. 100vh 高度异常

在 iOS 中：

100vh = 包含地址栏高度

键盘弹起时不会重新计算，导致布局错误。

四、100vh 在 iOS 的问题本质

100vh 在移动端并不是动态高度。

在 iOS Safari 中：

• 初始计算包含地址栏
• 键盘弹起不重新计算
• 视觉高度变小但布局高度不变

这也是为什么全屏布局在 iOS 上经常出问题。

五、dvh：新的动态视口单位

现代浏览器支持：

dvh → dynamic viewport height
svh → small viewport height
lvh → large viewport height

在支持的 iOS 版本中：

height: 100dvh;

会随着键盘变化而动态更新。

这比传统 100vh 更符合预期。

六、iOS App 内嵌 WebView 情况

在使用 WKWebView 的场景下，问题更加复杂。

iOS 原生层涉及：

• UIKeyboardWillChangeFrameNotification
• contentInset
• scrollView.keyboardDismissMode

如果没有在原生层同步处理键盘 frame 变化，WebView 内页面同样不会自动上推。

因此在 Hybrid 架构中，往往需要 JS 与原生协作处理。

七、iOS 软键盘行为的完整模型

软键盘弹起时，iOS 实际做了三件事：

1. 保持 Layout Viewport 不变
2. 缩小 Visual Viewport
3. 平移可视区域

这导致：

• 布局不重排
• fixed 元素错位
• vh 单位异常
• 页面不会自然滚动

理解这个模型之后，所有现象都可以解释。

八、Android 与 iOS 差异对比总结

这不是 Bug，而是平台设计差异。

九、为什么 iOS 这样设计？

iOS 的设计目标是：

• 保持页面布局稳定
• 避免频繁 reflow
• 提高动画流畅度
• 减少 DOM 重排成本

因此选择只移动可视区域，而不改变布局区域。这种设计对静态页面友好，但对 Web App 类产品并不友好。

十、移动端 Web 开发的现实

随着 Web 应用复杂度提升：

• IM 聊天界面
• 表单页面
• 富文本编辑
• 类 App 单页应用

iOS 软键盘行为带来的影响越来越明显。

理解 Viewport 双模型，是解决所有问题的前提。

结语

iOS 软键盘不自动上推页面，并不是一个简单的 兼容性问题 ，而是浏览器底层架构差异导致的行为差别。核心在于：

Android 改变的是 Layout Viewport iOS 改变的是 Visual Viewport

只要理解这一点，所有现象都可以被解释。移动端开发真正的难点，往往不在框架层，而在浏览器实现细节层。掌握底层原理，才能写出真正稳定的跨端页面。