html - 有没有安全的方法来使用 max-height CSS media-query

Question

据我所知，由于 iOS 上的 Chrome 67，不可能有用地使用最大高度媒体查询。

问题在于，当用户上下滚动时，Chrome 会添加和删除地址栏。当它这样做时，它会更改最大高度，这意味着如果您使用最大高度媒体查询来更改某物的高度，那么当用户向上或向下滚动时，低于该东西的任何东西都会跳动。

例如，我有一个 300x500 的图像，但在短屏幕上我想确保它没有填满屏幕，所以我有这样的东西

@media (max-height: 700px) {
  img {
    max-height: 400px;
  }
}

有效地“如果屏幕很短，则使图像也变短”

但是在 Chrome iOS 上发生的情况是，在 iPhone X 上，当它添加和删除地址栏时会触发媒体查询

如果页面上有几张图片，并且用户在上下滚动时靠近底部，页面将跳转半屏或更多。

请注意，iOS 上的 Safari 没有此问题，即使它也会使地址栏出现和消失。

我可以选择其他一些 max-height 来触发，但当然同样的事情可能发生在任何高度的任何手机上所以它看起来像使用 max-height触发事情是无可救药地坏了？

有没有办法实现我想要做的事情？

Answer 1

原来这是 iOS WkWebView 和/或 Chrome iOS 中的错误。该错误已在此处跟踪，因此如果他们设法修复它，那么我想问题就解决了。

https://bugs.chromium.org/p/chromium/issues/detail?id=720048