html - 有没有一种安全的方法来使用 max-height CSS media-query
<p><p>据了解，由于 iOS 上的 Chrome 67，因此无法有效地使用最大高度媒体查询。</p>
<p>问题在于，当用户上下滚动时，Chrome 会添加和删除地址栏。当它这样做时，它会更改最大高度，这意味着如果您使用最大高度媒体查询来更改某物的高度，那么当用户向上或向下滚动时，低于某物的任何东西都会跳跃。</p>
<p>例如，我有一个 300x500 的图像，但在短屏幕上我想确保它不会填满屏幕，所以我有这样的东西</p>
<pre><code>@media (max-height: 700px) {
img {
max-height: 400px;
}
}
</code></pre>
<p>有效地“如果屏幕短，则图像也短”</p>
<p>但在 Chrome iOS 上发生的情况是，在 iPhone X 上，当它添加和删除地址栏时会触发媒体查询</p>
<p> <a href="/image/EsR2A.gif" rel="noreferrer noopener nofollow"><img src="/image/EsR2A.gif" alt="enter image description here"/></a> </p>
<p>如果页面上有几张图片，并且用户在上下滚动时靠近底部，则页面将跳转半屏或更多屏幕。</p>
<p>请注意，iOS 上的 Safari 不存在此问题，即使它也会使地址栏出现和消失。</p>
<p>我可以选择其他一些 <code>max-height</code> 来触发，但当然同样的事情可能发生在任何高度的任何手机上，所以看起来就像使用 <code>max-height</code>触发的东西就断了？</p>
<p>有没有办法实现我想要做的事情？</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>原来这是 iOS WkWebView 和/或 Chrome iOS 中的一个错误。错误在这里被跟踪，所以如果他们设法修复它，那么我想问题就解决了。</p>
<p> <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=720048" rel="noreferrer noopener nofollow">https://bugs.chromium.org/p/chromium/issues/detail?id=720048</a> </p></p>
<p style="font-size: 20px;">关于html - 有没有一种安全的方法来使用 max-height CSS media-query，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/51157489/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/51157489/
</a>
</p>
页:
[1]