Hello，又见面了我是 pany。

文章开头提到了一个历时Yi久的 CSS 兼容性问题：100vh 在移动端设备上会出现滚动条，就像作者演示的这样：

这并非一个简单的错误，而是源于不同浏览器对视口高度计算方式的差异。在某些移动设备和浏览器中，地址栏等 UI 组件的出现会影响视口的高度，导致 100vh 实际占据的空间大于屏幕可见区域，从而产生滚动条。

在深入探讨解决方案之前，我们先回顾一下这些常用的视口单位：

vh : 相对于视窗的高度。

vw : 相对于视窗的宽度。

dvh : 动态视窗高度，不包括浏览器地址栏等 UI 组件占据的空间。

dvw : 动态视窗宽度，与 dvh 类似。

过去，开发者们尝试过各种方法来规避这个问题，比如使用 JavaScript 计算实际的可视高度并动态设置元素的高度。但这些方法往往比较繁琐，并且可Neng存在性Neng问题。

Zui近，一种新的解决方案逐渐流行起来——使用 dvh 和 dvw 。它们Neng够geng准确地获取屏幕的可视区域大小，从而避免了滚动条的问题。

也就是说大概需要默认搭载 Android 系统的手机才Ke以无风险的使用 dvh 属性，但是截止 年 月 Android 、 两个版本的占比大约在 %， ~ 四个版本的占比大约在 %。也就是说用户在使用默认浏览器或 webview 的时候，可Neng依旧有兼容性问题。

dvh 的优势显而易见：它Neng够提供geng准确的屏幕高度信息；而且无需复杂的 JavaScript 计算就Neng实现全屏效果。

但同时也要注意它也并非完美无缺。

虽然是以指出热榜第一文章的一些错误，但是原文本身Neng带给我们的知识还是非常有用的。让我们Neng在遇到对应问题的时候同时了解到「新」「旧」两种不同解决方案。

function setRealVH { const vh = window.innerHeight; document.documentElement.style.setProperty;}window.addEventListener);

但作者也提到了一个问题：监听 `resize` 事件过于频繁，可Neng会引发性Neng问题。这其实hen好解决，我们在原基础上补充一个防抖就好了：

这其实是一个在开发实践或者技术调用中不应该犯的错误,我们需要知道的是CSS属性的兼容性还应该根据当前主流浏览器版本用户量占比来判断。

订阅专栏本文探讨了在网页布局中使用100vh与100%时的区别,特别是在移动端界面设计中遇到的问题及解决方案.通过一个实际案例说明如何利用100vh来实现全屏效果,并解决了由此带来的滚动条问题。

到这里,想必大家应该Nenggeng清晰地理解 “100vh 在移动端设备上会出现滚动条” 是怎么一回事了.

今天在掘金社区kan见前端文章榜第一的文章《别再用 100vh 了！移动端视口高度的终极解决方案》.