不要在移动响应式设计中使用 100vh。

通常，我们使用height:100vh全屏布局，这是一种简单易用的技巧，也是获得更好设计的便捷方法。

例子

.content {
   height: 100vh;
}

但是，当我们在实际设备上测试我们的设计时，我们遇到了几个问题：

• 大多数移动设备上的 Chrome 和 Firefox 浏览器都在顶部有一个用户界面（地址栏等）。
• 在 Safari 浏览器中，情况会更复杂一些，地址栏位于底部。
• 不同浏览器的视口大小不同。
• 移动设备计算浏览器视口时，公式为（顶部栏 + 文档 + 底部栏）= 100vh
• 整份文档使用 100vh 填充到页面上。

问题

• 在 Chrome 浏览器上

检测到滚动条问题。用户体验不佳，内容难以浏览。

注：我也在 Safari 浏览器上测试过这个问题，结果发现用户体验更差。

解决方案

使用JS检测应用程序的高度。

使用 JavaScript 通过属性设置页面高度window.innerheight。

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);
}

这里，documentHeight 函数设置了新的样式属性 var('--doc-height')，并包含了当前窗口高度。

最终结果

Chrome浏览器

注：现在没有出现任何垂直方向的额外滚动条，Safari浏览器也没有任何问题。Safari浏览器的底部地址栏始终位于底部，这为用户访问网站提供了良好的流程。

总结
👏👏 希望通过以上内容，您能够解决移动设备视口问题。因此，我建议您在项目中尝试一下，并享受其中的乐趣！

欢迎分享您的想法和意见，如果您有任何问题或疑问，请给我留言。

在此之前，
继续破解吧，干杯！