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

Question

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

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

有什么方法可以避免这种行为并仍然使用根据视口(viewport)百分比调整大小的元素吗？

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%;
    }
}

您可以根据需要拥有任意数量的媒体查询。请注意，您可能需要根据需要编辑最小设备宽度或/和最大设备宽度。取决于设备。