移动Chrome和高度相关的尺寸和尺寸滚动

Question

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

简而言之 - 当用户向上滚动时，地址栏变为可见。这会更改屏幕的高度，从而强制元素调整大小。当滚动结束后发生这种情况时，用户会看到＆＃34;跳转＆＃34;滚动停止后。

有没有办法避免这种行为，仍然使用按视口百分比大小的元素？

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