Question

我创建了一个以完整（100％x 100％）图像div开头的页面。在滚动之前，此div将始终填满页面。

然后我有另一个带图像的div。

在桌面上没有问题。

但是，在手机上加载此页面时，我会轻扫手指以给它一点滚动，然后当手机完成滚动时，它会自动向后滚动一下。它似乎也放大了一点。

我认为这是由于100％的HTML和BODY标签，因为如果删除它，那么就没有滚动修正。

我在几部Android手机上试过这个并且总是一样的。我该如何解决？这是代码。

<style>
* {
    box-sizing: border-box;
    margin: 0;
}

html, body {
    height: 100%;
}

div {
  width: 100%;
  height: 100%;
}

div.first {
  background-image: url("http://i.imgur.com/VWYl1EC.jpg");
  background-attachment: fixed;
  background-size: cover;
}

div.second {
  background-image: url("http://i.imgur.com/PbV1Grl.jpg");
  background-size: cover;
}

</style>

<div class="first"></div>
<div class="second"></div>

Answer 1

问题是当页面上的第一个div的高度为％时，此自动更正滚动将在Android手机上发生。

解决方案是使用jQuery在PX中设置高度。例如：

$('.firstdiv').css('height', $(window).height() + 'px');

Answer 2

使用你的css如下： -

<style>
* {
    box-sizing: border-box;
    margin: 0;
}

html, body {
    height: 100%;
}

div.first {
  max-width:100%;
  background-image: url("http://i.imgur.com/VWYl1EC.jpg");
  background-size: cover;
  height:300px; /* as you needed */
}

div.second {
  max-width:100%;
  background-image: url("http://i.imgur.com/PbV1Grl.jpg");
  background-size: cover;
  height:300px; /* as you needed */
}

移动设备上的奇怪滚动校正

2 个答案: