移动设备上的顶部和底部填充问题

Question

我一直遇到一些问题，我无法在移动设备上轻轻一次向上或向下滚动。我假设问题与我创建的移动导航和手机上的网址栏混合显示和隐藏，具体取决于您是否向上或向下滚动。

有没有人遇到这个问题/为它找到了有效的解决方案？

Answer 1

当我改变两条规则时，问题就消失了

@media only screen and (max-width: 850px)
body, html {
    min-height: 100vh;
    min-width: 100vw;
}

和

html, body {
    min-height: 100%;
    min-width: 100%;
}

只需使用min-height和min-width而不是明确声明它们。

Answer 2

您使用的是设置视口吗？

如果您正在使用

之类的内容

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

这可能会影响手机本机滚动的方式。