视口进阶：移动端键盘弹出与遮挡处理实战

第一部分：键盘弹出的本质

键盘弹出不仅是一个 UI 行为，它是浏览器对**布局视口（Layout Viewport）与视觉视口（Visual Viewport）**关系的一次强行重塑。理解这个过程，是解决所有移动端输入体验问题的核心。

第二部分：两大阵营的哲学博弈

要理解遮挡，首先要回答：position: fixed 到底是钉在哪里的？

在现代浏览器中，fixed 默认针对 布局视口 定位。当键盘弹出时，两套系统的处理逻辑截然不同：

2.1 安卓（及 Chrome）：画布压缩派

逻辑：键盘弹出 布局视口高度收缩。
过程：因为 fixed 钉在布局视口底边，画布变短，底边上移，元素自然"弹"到键盘上方。
后果：背景图若设为 100% 会被压扁，产生比例失调。

2.2 iOS (Safari)：视觉覆盖派

逻辑：键盘弹出 布局视口不动，仅视觉视口收缩。
过程：布局视口高度依然是原来的 100vh，fixed 元素死死钉在遥远的"真·底部"。
结果：键盘像盖板一样覆盖在视觉视口上方，导致底部元素被物理遮挡。

第三部分：实战中的"深坑"场景对照

场景	安卓（布局视口变动）	iOS（布局视口静止）
底部固定按钮	自动弹起，显示正常。	被完全遮挡，无法点击。
全屏背景图	画面被压缩变形。	保持完美，但下半部分不可见。
100vh 元素	计算值实时变小。	计算值保持不变。

第四部分：从"被动滚动"到"主动适配"

在处理遮挡时，开发者通常会经历从传统方法到现代 API 的思维转变：

4.1 传统方案：`scrollIntoView` 的"被动补救"

早期的通用做法是监听输入框聚焦，然后调用 el.scrollIntoView()。

运行过程：

键盘弹出，遮住了输入框。
脚本触发 scrollIntoView。
浏览器强行滚动布局视口 （改变 window.scrollY），试图让输入框出现在视觉视口的中心。

局限性：
无法处理"固定元素" ：它只能挪动画布内容，但 fixed 元素依然被挡在键盘下。
布局副作用：在 iOS 上常导致页面顶部出现黑块或白色死区，且滚动极其生硬，无法实现 UI 元素的精准对齐。

4.2 现代方案：`VisualViewport` 的"空间重塑"

相比被动地"滚一下"，现代方案倾向于通过数据主动重新计算 UI 位置。

运行过程：

监听 window.visualViewport 的 resize 事件。
获取键盘占用的物理像素高度 （innerHeight - visualViewport.height）。
实时调整 UI 容器的 padding-bottom 或元素的 translateY。

优势：
全局掌控：不仅输入框可见，吸底的发送按钮也能精准对齐键盘顶端。
无感适配：不依赖页面滚动，避免了 iOS 常见的滚动回弹 Bug。

第五部分：终极解决方案

协同策略：VisualViewport (定框架) + scrollIntoView (定位焦点)

javascript 复制代码

/**
 * 移动端输入环境综合适配方案
 */
function setupInputEnvironment() {
  if (!window.visualViewport) return;

  const footer = document.querySelector('.action-bar');
  const input = document.querySelector('.main-input');
  
  // 1. 利用 VisualViewport 修正 UI 框架（解决 fixed 遮挡）
  window.visualViewport.addEventListener('resize', () => {
    const offset = window.innerHeight - window.visualViewport.height;
    
    // 动态调整底部偏移，确保工具栏永远贴在键盘上方
    footer.style.transform = `translateY(-${offset}px)`;
    
    // 2. 配合 scrollIntoView 确保输入焦点处于视觉中心
    if (offset > 0 && document.activeElement === input) {
      setTimeout(() => {
        input.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }, 300); // 略微延迟，等待键盘弹出动画完成
    }
  });
}

document.addEventListener('DOMContentLoaded', setupInputEnvironment);

最后的思考

适配的本质是"对抗不确定性"。

scrollIntoView 是在承认"我不知道键盘在哪"的前提下，让浏览器自己去找焦点。
VisualViewport 则是"我清晰地掌握了每一像素的空间变动"，从而主动指挥布局。

在现代 Web 开发中，我们应以 VisualViewport 作为空间管理的基石 ，辅以 scrollIntoView 作为用户体验的微调，从而彻底抹平 iOS 与安卓在视口处理上的哲学差异。