CSS 视口单位陷阱：移动端软键盘弹出时 vh 与 dvh 的重算行为
大家好！今天我们来深入探讨一个在移动端开发中经常遇到的问题，那就是当软键盘弹出时，CSS 视口单位 vh 和 dvh 的重算行为。这个问题看似简单，实则会带来很多意想不到的布局问题，尤其是在需要元素占据整个屏幕高度的场景下。
视口单位简介
在深入探讨陷阱之前，我们先快速回顾一下 CSS 的视口单位。视口代表浏览器窗口中实际显示网页内容的区域。常见的视口单位包括：
vw(viewport width): 视口宽度的 1%。vh(viewport height): 视口高度的 1%。vmin(viewport minimum): 视口宽度和高度中较小者的 1%。vmax(viewport maximum): 视口宽度和高度中较大者的 1%。
这些单位允许开发者根据视口大小动态调整元素尺寸，实现响应式布局。例如，我们可以使用 height: 100vh; 让一个 div 元素占据整个屏幕的高度。
vh 在移动端的表现：软键盘带来的挑战
在桌面浏览器上，vh 的表现相对简单，它代表浏览器窗口的高度。但在移动端，情况变得复杂起来，因为软键盘的出现会改变视口的高度。
当软键盘弹出时，传统的 vh 单位会重新计算，将软键盘占据的空间也计算在内。这意味着 100vh 不再代表屏幕的完整高度，而是代表屏幕高度减去软键盘高度后的剩余高度。这会导致原本占据整个屏幕的元素突然缩小，布局错乱。
示例：
<!DOCTYPE html>
<html>
<head>
<title>vh 问题</title>
<style>
body {
margin: 0;
}
.full-height-container {
height: 100vh;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
input {
padding: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="full-height-container">
<input type="text" placeholder="请输入内容">
</div>
</body>
</html>在这个例子中，.full-height-container 被设置为 height: 100vh。在没有软键盘时，它占据整个屏幕高度。但当软键盘弹出时，.full-height-container 的高度会缩小，导致其不再占据整个屏幕。 这种情况会使得内容不再垂直居中，并且底部出现空白。
解决方案：dvh 登场
为了解决这个问题，CSS 引入了一种新的视口单位：dvh（dynamic viewport height）。dvh 代表动态视口高度，它的设计初衷就是为了解决软键盘带来的布局问题。
dvh 与 vh 的关键区别在于：
vh: 在软键盘弹出时会重新计算，反映屏幕剩余的高度。dvh: 保持在页面初始加载时的视口高度，不受软键盘的影响。
因此，使用 dvh 可以确保元素始终占据屏幕的完整高度，即使软键盘弹出也不会改变其高度。
修改示例：
<!DOCTYPE html>
<html>
<head>
<title>dvh 解决方案</title>
<style>
body {
margin: 0;
}
.full-height-container {
height: 100dvh;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
input {
padding: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="full-height-container">
<input type="text" placeholder="请输入内容">
</div>
</body>
</html>在这个修改后的例子中，我们将 .full-height-container 的高度设置为 100dvh。现在，即使软键盘弹出，.full-height-container 仍然占据整个屏幕高度，垂直居中效果得以保持。
dvh 的兼容性问题与备选方案
虽然 dvh 能够很好地解决软键盘带来的布局问题，但其兼容性仍然需要考虑。截至目前（2024年），dvh 的兼容性主要集中在较新的浏览器版本中。对于一些老旧的浏览器或特定的移动端环境，dvh 可能无法正常工作。
兼容性表格 (截至2024年)：
| 浏览器 | 支持 dvh |
|---|---|
| Chrome | 是 (版本 84+) |
| Firefox | 是 (版本 79+) |
| Safari | 是 (版本 14.1+) |
| Edge | 是 (版本 84+) |
| Android Browser | 部分支持 |
| iOS Safari | 是 (版本 14.5+) |
如果需要支持更广泛的浏览器，可以考虑以下备选方案：
-
CSS 函数
calc()和env():可以使用
calc()函数结合环境变量env(safe-area-inset-bottom)来计算元素的高度。env(safe-area-inset-bottom)返回底部安全区域的内边距，这可以用来抵消软键盘的高度。.full-height-container { height: calc(100vh - env(safe-area-inset-bottom)); /* 其他样式 */ }这种方法需要注意的是，
env()函数的兼容性也需要考虑。此外，safe-area-inset-bottom主要用于处理 iOS 设备上的安全区域，在某些 Android 设备上可能无法正常工作。 -
JavaScript 解决方案:
可以使用 JavaScript 监听
resize事件，在软键盘弹出时动态调整元素的高度。function adjustHeight() { const container = document.querySelector('.full-height-container'); const windowHeight = window.innerHeight; // 获取当前窗口高度 container.style.height = windowHeight + 'px'; } // 初始化时调整高度 adjustHeight(); // 监听 resize 事件 window.addEventListener('resize', adjustHeight);这种方法可以实现更精确的控制，但也增加了代码的复杂度。需要注意的是，频繁地触发
resize事件可能会影响性能，需要进行适当的优化，例如使用debounce函数来限制事件触发的频率。 -
混合方案:
可以结合 CSS 和 JavaScript 来实现更可靠的解决方案。例如，可以使用
dvh作为首选方案，并使用 JavaScript 作为备选方案，当dvh不可用时，使用 JavaScript 来调整元素的高度。.full-height-container { height: 100dvh; /* 首选方案 */ height: calc(100vh); /* 备选方案，用于不支持 dvh 的浏览器 */ } /* JavaScript 代码，检测 dvh 是否支持 */ if (CSS.supports('height', '100dvh')) { // 支持 dvh，无需额外处理 } else { // 不支持 dvh，使用 JavaScript 调整高度 function adjustHeight() { const container = document.querySelector('.full-height-container'); const windowHeight = window.innerHeight; container.style.height = windowHeight + 'px'; } adjustHeight(); window.addEventListener('resize', adjustHeight); }
最佳实践与注意事项
在实际开发中，为了避免 vh 带来的布局问题，并确保应用在各种移动端设备上的良好体验，建议遵循以下最佳实践：
-
优先使用
dvh: 如果目标用户群体的浏览器支持dvh，优先使用dvh来设置元素的高度。 -
考虑兼容性问题: 在使用
dvh之前，务必考虑其兼容性，并提供备选方案，例如 CSS 函数calc()和env()或 JavaScript 解决方案。 -
进行充分测试: 在各种移动端设备和浏览器上进行充分的测试，确保应用在软键盘弹出和隐藏时能够正常工作。
-
注意性能优化: 如果使用 JavaScript 解决方案，需要注意性能优化，例如使用
debounce函数来限制resize事件的触发频率。 -
避免过度依赖视口单位: 视口单位虽然方便，但过度依赖视口单位可能会导致布局过于僵硬，难以适应不同的屏幕尺寸。可以结合其他 CSS 技术，例如 flexbox 和 grid 布局，来实现更灵活的响应式布局。
示例：结合 CSS 和 JavaScript 的兼容性解决方案
下面是一个更完整的示例，演示了如何结合 CSS 和 JavaScript 来实现一个兼容性更好的解决方案：
<!DOCTYPE html>
<html>
<head>
<title>兼容性解决方案</title>
<style>
body {
margin: 0;
}
.full-height-container {
height: 100dvh; /* 首选方案 */
height: calc(100vh); /* 备选方案，用于不支持 dvh 的浏览器 */
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
input {
padding: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="full-height-container">
<input type="text" placeholder="请输入内容">
</div>
<script>
// 检测 dvh 是否支持
if (CSS.supports('height', '100dvh')) {
// 支持 dvh，无需额外处理
console.log('dvh is supported');
} else {
// 不支持 dvh，使用 JavaScript 调整高度
console.log('dvh is not supported');
function adjustHeight() {
const container = document.querySelector('.full-height-container');
const windowHeight = window.innerHeight;
container.style.height = windowHeight + 'px';
}
adjustHeight();
window.addEventListener('resize', adjustHeight);
// 使用 debounce 函数限制 resize 事件的触发频率
function debounce(func, delay) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), delay);
};
}
const debouncedAdjustHeight = debounce(adjustHeight, 250); // 250ms 的延迟
window.addEventListener('resize', debouncedAdjustHeight);
}
</script>
</body>
</html>在这个示例中，我们首先使用 dvh 作为首选方案，并使用 calc(100vh) 作为备选方案。然后，我们使用 JavaScript 检测浏览器是否支持 dvh。如果不支持，则使用 JavaScript 动态调整元素的高度，并使用 debounce 函数来限制 resize 事件的触发频率，从而提高性能。
更多思考：动态调整与用户体验
除了解决布局问题，我们还需要考虑软键盘弹出对用户体验的影响。例如，当软键盘弹出时，用户可能需要滚动页面才能看到输入框。为了解决这个问题，可以使用 JavaScript 将输入框滚动到屏幕的可见区域。
此外，还可以使用 CSS 的 scroll-behavior: smooth; 属性来实现平滑滚动效果。
避免布局问题，优化用户体验
今天我们深入探讨了移动端软键盘弹出时 vh 和 dvh 的重算行为，以及如何使用 dvh 和备选方案来解决由此带来的布局问题。希望通过今天的讲解，大家能够更好地理解这个问题，并在实际开发中避免类似的陷阱，为用户提供更好的移动端体验。 记住，优先考虑 dvh，兼顾兼容性，充分测试，并关注用户体验，是解决这个问题的关键。
更多IT精英技术系列讲座，到智猿学院