移动 Chrome 和高度相关的大小和滚动

Question

在我最近的项目中，我正在使用使用百分比高度的元素。它适用于大多数浏览器，但会在 Chrome 移动版中产生不良行为。

简而言之 - 当用户向上滚动时，地址栏变得可见。这会改变屏幕的高度，从而强制元素调整大小。由于滚动结束后会发生这种情况，因此用户会在滚动停止后看到“跳跃”。

有什么方法可以避免这种行为并且仍然使用按视口百分比调整大小的元素？

Answer 1

是的。您可以使用 css 解决此问题。只需使用这样的@media 查询：

@media only screen
    and (min-device-width: 320px) //here is your condition for the screen
    and (max-device-width: 568px){

    .class{
        height: 80%;
    }
}

您可以根据需要进行尽可能多的媒体查询。请注意，您可能需要根据需要编辑 min-device-width 或/和 max-device-width。取决于设备。