有没有使用最大高度CSS媒体查询的安全方法

时间:2018-07-03 14:49:58

标签: html ios css google-chrome

据介绍,由于iOS上的Chrome 67,无法有效地使用max-height媒体查询。

问题在于,随着用户上下滚动,Chrome浏览器会添加和删除地址栏。这样做会更改max-height,这意味着如果您使用max-height媒体查询来更改某物的高度,则低于该值的东西将在用户向上或向下滚动时跳跃。

例如,我有一张300x500的图片,但在短屏幕上,我想确保它没有填满整个屏幕,所以我有类似的图片

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

有效地“如果屏幕很短也要使图像更短”

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

enter image description here

如果页面上有几张图像,并且用户在上下滚动时位于底部附近,则页面将跳半屏或更多。

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

我可以选择其他一些max-height来触发,但是同样的事情可能发生在任何高度的手机上,因此看起来好像max-height触发东西被打碎了吗?

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

1 个答案:

答案 0 :(得分:2)

证明这是iOS WkWebView和/或Chrome iOS中的错误。在此跟踪该错误,因此如果他们设法解决该问题,那么我想问题就解决了。

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