我认为适用于 Android 的 Google Chrome 有一个奇怪的视口高度错误，应该修复它。现在，你如何处理它？

Posted 2023-03-06

【中文标题】我认为适用于 Android 的 Google Chrome 有一个奇怪的视口高度错误，应该修复它。现在，你如何处理它？

【英文标题】：I think Google Chrome for Android has a bizarre viewport height error, and it should be fixed. For now, how do you deal with it?

【发布时间】：2016-05-12 15:10:07

【问题描述】：

现在，我在 android 版 Chrome 上遇到了height: 100%（或100vh）的问题。

在这里，我有一个页面和一个带有height: 100vh 的蓝色 div。黄色块有height: 50vh。

当我向下滚动时，地址栏消失了，这使得视口大小发生了变化！因此，基于此的所有内容也会发生变化，您可以在此处看到：

.

一切都增加55px，这是地址栏的确切大小。这太烦人了。

我在加载时通​​过height() 临时修复了它，但它是 jQuery，所以它让我的网站不必要地变慢了。

你是怎么处理的？

【参考方案1】：

不幸的是，今天没有令人满意的方法来处理这个问题。好消息是，正因为如此，我已经改变了这种行为，以便 100vh 是静态的，并且当 URL 栏被隐藏时视口的大小（与 Safari 匹配）。有关详细信息，请参阅the Chrome Bug。目前处于 Canary 频道，将在 M50 中发货。

有一个不幸的细节：height:100% 指的是显示 URL 栏时的视口，但 100vh 是指隐藏 URL 栏时的视口（有关详细信息，请参阅我的 explainer）！我这样做是为了与 Safari 兼容，但我们正在寻找方法让它更合理，这样 M50 目标可能会滑倒，而不是发布更理智的东西。

同时，如果您迫不及待并且希望页面元素保持静态大小，我建议您明确调整位置的大小：基于 window.innerHeight 的绝对框作为根，并使用基于百分比的高度这些孩子。这并不理想，但希望很快会好起来:)

更新：Chrome M56 中的This is shipping - 您目前可以在 Beta 版中试用。