Html 手机上的奇怪滚动校正

我制作了一个以完整（100%乘100%）图像div开头的页面。 在滚动之前，此div将始终填充页面

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

在桌面上没有问题

然而，在手机上，当这个页面被加载时，我用手指轻轻地滚动一下，然后当手机完成滚动时，它会快速/自动地向后滚动一点。它似乎也放大了一点

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

我已经在几个安卓手机上试过了，而且都是一样的。我该如何解决这个问题？这是密码

<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>

* {
框大小：边框框；
保证金：0；
}
html，正文{
身高：100%；
}
div{
宽度：100%；
身高：100%；
}
第一分区{
背景图像：url（“http://i.imgur.com/VWYl1EC.jpg");
背景附件：固定；
背景尺寸：封面；
}
第二分区{
背景图像：url（“http://i.imgur.com/PbV1Grl.jpg");
背景尺寸：封面；
}

使用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 */
}

* {
框大小：边框框；
保证金：0；
}
html，正文{
身高：100%；
}
第一分区{
最大宽度：100%；
背景图像：url（“http://i.imgur.com/VWYl1EC.jpg");
背景尺寸：封面；
高度：300px；/*根据需要*/
}
第二分区{
最大宽度：100%；
背景图像：url（“http://i.imgur.com/PbV1Grl.jpg");
背景尺寸：封面；
高度：300px；/*根据需要*/
}

问题是当页面上的第一个div的高度以%为单位时，Android手机上会出现这种自动更正滚动

解决方案是使用jQuery以PX为单位设置高度。 例如：

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

---

不，这不会在开始滚动前使第一个图像全屏显示是的，问题是如果第一个div包含高度百分比（而不是像素），则会出现自动滚动。。。也许我需要使用javascript来查找窗口高度，并在加载时将其设置为pixelx。