我认为 Android 版 Google Chrome 有一个奇怪的视口高度错误，应该修复它。目前，你是如何处理的？

Question

一段时间以来，我在Android 版 Chrome 上遇到了height: 100%（或100vh）问题。

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

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

.

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

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

你如何解决？

Answer 1

不幸的是，目前还没有令人满意的方法来处理这个问题。好消息是，正因为如此，我更改了此行为，以便 100vh 是静态的，并且是隐藏 URL 栏时视口的大小（与 Safari 匹配）。有关详细信息，请参阅Chrome 错误。该产品目前位于加那利海峡，并将通过 M50 运输。

有一个不幸的细节：height:100% 指的是显示 URL 栏时的视口，但当 URL 栏隐藏时 100vh 填充视口（有关更多详细信息，请参阅我的解释）！我这样做是为了与 Safari 兼容，但我们正在寻找使其更加合理的方法，因此 M50 目标可能会优先于提供更理智的东西。

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

更新：此功能在 Chrome M56 中发布 - 您目前可以在 Beta 版中试用。