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 的表现相对简单，它代表浏览器窗口的高度。但在移动端 …