CSS 视口单位：dvh/lvh/svh 解决移动端地址栏遮挡问题
大家好，今天我们来深入探讨CSS视口单位中的新秀：dvh、lvh 和 svh，以及它们如何优雅地解决移动端Web开发中常见的地址栏遮挡问题。在移动设备上，浏览器地址栏的出现和消失会动态改变视口高度，传统视口单位 vh 在这种情况下表现不尽如人意，可能导致页面元素被遮挡或布局错乱。dvh、lvh、svh 的出现正是为了解决这个问题，提供了更稳定和可预测的视口高度参考。
一、问题的由来：传统 vh 的局限性
在深入了解新型视口单位之前，我们首先回顾一下传统视口单位 vh 的定义和局限性。vh 代表视口高度的百分之一。例如，100vh 表示视口高度的 100%，也就是整个视口的高度。
在桌面浏览器中，vh 的行为通常符合预期，因为视口高度相对稳定。然而，在移动端浏览器中，情况就复杂多了。地址栏的显示与隐藏会动态改变视口的高度，导致以下问题：
- 元素被遮挡： 当地址栏显示时，
100vh计算出的高度会包含地址栏的高度，导致页面底部的元素被地址栏遮挡。 - 布局跳动： 当地址栏隐藏和显示切换时，
100vh的值会随之改变，导致页面元素的高度发生变化，产生布局跳动，影响用户体验。
示例：vh 的遮挡问题
假设我们有一个简单的页面，包含一个占据整个视口的 div 元素：
<!DOCTYPE html>
<html>
<head>
<title>vh Problem</title>
<style>
body {
margin: 0;
overflow: hidden; /* Prevent scrollbar */
}
.full-height {
height: 100vh;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="full-height">
Content
</div>
</body>
</html>在移动端浏览器中，当地址栏显示时，你会发现 div 元素的底部会被地址栏遮挡。
二、dvh、lvh 和 svh：新的解决方案
为了解决 vh 的局限性，CSS 引入了三个新的视口单位：
dvh(Dynamic Viewport Height): 动态视口高度，表示视口在地址栏显示和隐藏之间动态变化时的高度。100dvh表示视口在任何状态下的最大高度。lvh(Large Viewport Height): 最大视口高度，表示视口在没有地址栏时的最大高度。100lvh永远代表视口可能达到的最大高度。svh(Small Viewport Height): 最小视口高度，表示视口在地址栏显示时的最小高度。100svh永远代表视口可能达到的最小高度。
三、dvh、lvh 和 svh 的工作原理及使用场景
理解这三个单位的关键在于区分它们代表的视口高度的参考点：
| 视口单位 | 参考高度 | 适用场景 |
|---|---|---|
dvh |
视口在地址栏显示和隐藏之间动态变化时的高度。它会随着地址栏的状态而变化，因此是动态的。 | 需要适应地址栏动态变化的场景，例如：全屏滚动页面，确保内容始终可见。 |
lvh |
视口在没有地址栏时的最大高度。即使地址栏显示，lvh 的值也不会改变。 |
需要确保元素的高度不会超过视口最大高度的场景，例如：固定底部导航栏，确保其始终可见，且不会被内容覆盖。 |
svh |
视口在地址栏显示时的最小高度。即使地址栏隐藏，svh 的值也不会改变。 |
需要确保元素的高度至少占据视口最小高度的场景，例如：在地址栏显示时，确保页面主体内容始终占据一定的屏幕空间，避免内容过少导致视觉体验不佳。 |
示例：使用 dvh 解决遮挡问题
我们可以使用 dvh 来解决之前 vh 导致的遮挡问题：
<!DOCTYPE html>
<html>
<head>
<title>dvh Solution</title>
<style>
body {
margin: 0;
overflow: hidden; /* Prevent scrollbar */
}
.full-height {
height: 100dvh;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="full-height">
Content
</div>
</body>
</html>现在，即使地址栏显示，div 元素的高度也会动态调整，确保内容始终可见，不会被遮挡。
示例：使用 lvh 和 svh 控制元素高度范围
假设我们需要创建一个占据视口大部分空间的卡片，但希望在地址栏显示时，卡片至少占据 80% 的视口高度，在地址栏隐藏时，卡片不超过 90% 的视口高度：
<!DOCTYPE html>
<html>
<head>
<title>lvh and svh Example</title>
<style>
body {
margin: 0;
}
.card {
height: clamp(80svh, auto, 90lvh);
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="card">
<h2>Card Title</h2>
<p>This is a card that occupies a portion of the viewport, with minimum and maximum height constraints.</p>
</div>
</body>
</html>在这个例子中，我们使用了 clamp() 函数来限制卡片的高度。clamp(80svh, auto, 90lvh) 表示卡片的高度将在 80svh 和 90lvh 之间取值，具体取值取决于视口的高度。如果视口高度小于 80svh，则卡片的高度为 80svh；如果视口高度大于 90lvh，则卡片的高度为 90lvh；否则，卡片的高度将自动调整。
四、浏览器兼容性
虽然 dvh、lvh 和 svh 提供了强大的功能，但需要注意的是，它们的浏览器兼容性并非完美。截至目前，主流浏览器（如 Chrome、Firefox、Safari）的最新版本都支持这些单位。然而，一些旧版本的浏览器可能不支持，或者支持不完整。
在实际开发中，我们需要根据目标用户的浏览器分布情况，采取适当的兼容性处理措施。以下是一些建议：
- 使用渐进增强： 优先使用
dvh、lvh和svh，并为不支持的浏览器提供备选方案。例如，可以使用vh作为回退方案，或者使用 JavaScript 来动态计算元素的高度。 - 使用 CSS 功能查询： 使用
@supports规则来检测浏览器是否支持dvh、lvh和svh，并根据检测结果应用不同的样式。 - 使用 Polyfill： 可以使用 JavaScript Polyfill 来为不支持
dvh、lvh和svh的浏览器提供支持。
示例：使用 CSS 功能查询进行兼容性处理
.full-height {
height: 100vh; /* Fallback for older browsers */
}
@supports (height: 100dvh) {
.full-height {
height: 100dvh;
}
}在这个例子中，我们首先使用 vh 作为回退方案。然后，使用 @supports 规则检测浏览器是否支持 dvh。如果支持，则使用 dvh 覆盖 vh 的样式。
五、dvh、lvh 和 svh 的最佳实践
在使用 dvh、lvh 和 svh 时，需要注意以下最佳实践：
- 谨慎使用：
dvh的动态特性可能会导致页面布局不稳定，因此需要谨慎使用。在某些情况下，lvh和svh可能是更好的选择。 - 结合其他 CSS 技术：
dvh、lvh和svh可以与其他 CSS 技术（如 Flexbox、Grid）结合使用，实现更复杂的布局效果。 - 进行充分测试： 在不同的设备和浏览器上进行充分测试，确保页面在各种情况下都能正常显示。
- 考虑用户体验： 在使用
dvh时，要考虑地址栏的显示和隐藏对用户体验的影响。避免频繁的布局变化，保持页面的稳定性。
六、dvh、lvh、svh 与 JavaScript 的结合
虽然 dvh、lvh 和 svh 主要是 CSS 的特性，但在某些情况下，我们可能需要使用 JavaScript 来获取这些单位的值，或者动态地修改元素的高度。
可以使用 window.innerHeight、document.documentElement.clientHeight 等 JavaScript 属性来获取视口的高度，但这些属性的值可能与 dvh、lvh 和 svh 的值不同。
为了获取 dvh、lvh 和 svh 的精确值，可以使用 CSS calc() 函数结合 var() 函数，将这些单位的值传递给 JavaScript。
示例：使用 JavaScript 获取 dvh 的值
<!DOCTYPE html>
<html>
<head>
<title>Get dvh with JavaScript</title>
<style>
:root {
--dvh: 100dvh; /* Define a CSS variable for 100dvh */
}
body {
margin: 0;
}
.full-height {
height: calc(var(--dvh)); /* Use the CSS variable to set height */
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="full-height">
Content
</div>
<script>
// Function to get the dvh value in pixels
function getDvh() {
return document.querySelector('.full-height').offsetHeight;
}
// Log the dvh value to the console
console.log('100dvh in pixels:', getDvh());
</script>
</body>
</html>在这个例子中，我们首先定义了一个 CSS 变量 --dvh，并将其值设置为 100dvh。然后，在 .full-height 元素的 height 属性中使用 calc(var(--dvh))，将 dvh 的值应用到元素上。
在 JavaScript 中，我们定义了一个 getDvh() 函数，该函数使用 document.querySelector('.full-height').offsetHeight 来获取 .full-height 元素的高度。由于 .full-height 元素的高度是由 dvh 控制的，因此 getDvh() 函数实际上获取了 dvh 的像素值。
七、dvh、lvh、svh 的适用场景深度剖析
我们已经了解了 dvh、lvh 和 svh 的基本概念和用法，现在让我们更深入地探讨它们在实际开发中的适用场景。
-
全屏滚动页面 (Full-screen Scrolling Websites):
在全屏滚动页面中，每个 section 通常占据整个视口的高度。使用
dvh可以确保每个 section 始终占据可用视口的高度，无论地址栏是否显示。lvh可以作为 section 的最大高度，避免内容超出屏幕。.section { height: 100dvh; /* Use dvh for dynamic height */ max-height: 100lvh; /* Ensure it doesn't exceed the max viewport height */ /* Other styles */ } -
模态框 (Modals) 和弹出窗口 (Popups):
当模态框或弹出窗口需要占据大部分视口时，可以使用
dvh来确保它们在地址栏显示时仍然可见。svh可以作为模态框的最小高度，确保其内容不会被截断。.modal { height: 80dvh; /* Occupy 80% of the dynamic viewport height */ min-height: 60svh; /* Minimum height when the address bar is visible */ /* Other styles */ } -
固定底部导航栏 (Fixed Bottom Navigation Bars):
固定底部导航栏是一种常见的移动端设计模式。使用
lvh可以确保导航栏始终位于屏幕底部，并且不会被内容覆盖。.bottom-nav { position: fixed; bottom: 0; width: 100%; height: 80px; /* Fixed height */ max-height: calc(100lvh - 90vh); /*Avoid overlapping content when address bar hides */ /* Other styles */ } -
自适应表单 (Responsive Forms):
在表单中，可以使用
dvh来调整表单元素的高度，确保它们在不同设备和地址栏状态下都能正常显示。.form-group { margin-bottom: 2dvh; /* Dynamic margin based on viewport height */ } -
游戏界面 (Game Interfaces):
在游戏界面中，精确控制元素的位置和大小至关重要。
dvh、lvh和svh可以用于创建自适应的游戏界面，确保游戏元素在不同设备上都能正确显示。.score-panel { position: absolute; top: 5svh; /* Positioned at 5% of the minimum viewport height */ right: 5svh; /* Other styles */ } -
图片或视频的全屏显示 (Full-screen Images or Videos):
要创建一个全屏显示的图片或视频，可以使用
dvh和lvh来确保内容占据整个视口，并且不会被地址栏遮挡。.full-screen-image { width: 100%; height: 100dvh; max-height: 100lvh; object-fit: cover; /* Ensure the image covers the entire area */ }
通过上述案例，我们可以看到 dvh、lvh 和 svh 在解决移动端地址栏遮挡问题方面具有强大的潜力。选择合适的视口单位，可以显著提升移动端Web应用的用户体验。
八、解决移动端地址栏遮挡的终极方案
dvh, lvh, svh 提供了新的思路，选择合适的视口单位可以有效解决移动端地址栏遮挡问题，优化用户体验。希望这些新单位能在你的实际开发中发挥作用。
更多IT精英技术系列讲座，到智猿学院