一般来说，我们使用 height:100vh 进行全屏布局，这是一种很方便的响应式方法。
.content {
height: 100vh;
}但当在实际设备上测试我们的设计时，我们遇到了几个问题。
- 大部分移动端的Chrome和Firefox浏览器在顶部都有一个UI（地址栏等）。
- 在Safari浏览器上，地址栏在底部，这就变得更加棘手了。
- 不同的浏览器有不同大小的视口
- 移动设备计算浏览器视口为（顶栏+文档+底栏）=100vh
- 整个文档使用 100vh 填充到页面中
问题
谷歌
已检测到滚动条问题。糟糕的用户滚动和难以浏览的内容。
注意：在Safari上测试了这个问题，它更加糟糕。
解决方案
通过JS检测应用程序的高度
const documentHeight = () => {
const doc = document.documentElement
doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
}
window.addEventListener(‘resize’, documentHeight)
documentHeight()使用 css 变量
:root {
--doc-height: 100%;
}
html,
body {
padding: 0;
margin: 0;
height: 100vh; /* fallback for Js load */
height: var(--doc-height);
}最后结果
现在没有任何额外的垂直滚动条出现，Safari也没有问题，这样的用户体验得到很大的提升。
原文：https://dev.to/nirazanbasnet/dont-use-100vh-for-mobile-responsive-3o97
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！