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

Question

在我最近的项目中，我使用的是使用百分比高度的元素。它在大多数浏览器上运行良好，但是，它会在 Chrome Mobile 中创建不需要的行为。

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

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

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。取决于设备。