移动端键盘弹出时背景色未占满视口高度的问题排查与修复

问题描述 #

我正在使用HTML和CSS开发一款网页即时通讯应用，遇到一个问题：当移动端键盘弹出并滚动页面时，背景色无法铺满视口的全部高度。

问题截图 #

Step 1	Step 2	Step 3

问题成因 #

1. vh单位的局限性：100vh是基于页面初始加载时的视口高度计算，部分移动端浏览器（如iOS Safari）在键盘弹出后不会更新vh的基准值，导致设置height:100vh的背景元素高度无法适配键盘弹出后的缩小视口，滚动时底部露出空白。
2. 视口高度动态变化未响应：键盘弹出时，window.innerHeight或document.documentElement.clientHeight会实时变化，但静态CSS设置的高度无法自动跟随这个变化，背景元素高度与实际可用视口不匹配。
3. 页面滚动容器高度适配问题：若背景设置在<body>或<html>标签，当页面内容超过视口高度时，滚动后根容器高度未跟随滚动区域扩展，键盘弹出后可滚动区域高度进一步变化，背景无法覆盖新增区域。

修复方案 #

方案1：用动态视口单位dvh替代vh #

现代浏览器支持dvh（Dynamic Viewport Height），它会随视口动态变化（包括键盘弹出）实时更新高度，无需额外JS：

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 兼容不支持dvh的老旧浏览器 */
  min-height: 100dvh;
  background-color: #你的背景色;
}

方案2：JS监听视口变化动态调整高度 #

针对不支持dvh的场景，通过监听视口尺寸变化实时更新背景元素高度：

function syncBackgroundHeight() {
  const currentViewportHeight = window.innerHeight || document.documentElement.clientHeight;
  document.body.style.height = `${currentViewportHeight}px`;
}

// 初始化执行
syncBackgroundHeight();
// 监听窗口大小变化
window.addEventListener('resize', syncBackgroundHeight);
// 针对iOS设备监听visualViewport变化
if (window.visualViewport) {
  window.visualViewport.addEventListener('resize', syncBackgroundHeight);
}

配合基础CSS：

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background-color: #你的背景色;
}

方案3：固定定位伪元素覆盖视口 #

使用固定定位的伪元素作为背景，无论视口如何变化或页面滚动，都能始终铺满整个视口：

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #你的背景色;
  z-index: -1; /* 确保在页面内容下方 */
}

内容的提问来源于stack exchange，提问作者MARK BRYAN GABRIEL