html - 在移动设备上滚动时背景图像不断调整

Question

我的第一篇文章在这里。

我自己网站上的一些东西困扰了我很长时间。问题是，当我在我的 Android 手机上访问我的网站并滚动页面时，背景图像一直在“调整”，因此在滚动网站时不断发生类似口吃的事件。您可以在这里访问:http://www.bramvalstar.nl

背景类:

.achtergrond {
position: relative;
width: auto;
height: 95%;
background: url(media/images/xxx.png) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;

提前致谢。

Answer 1

是的，这就是使用相对页面高度的影响。您会看到，当页面加载时，可用视口(viewport)高度略小于 100%，因为地址栏占据了顶部的一些空间。当您向下滚动时，地址栏消失，视口(viewport)高度跳回 100%，因此您的页面重新调整到新的可用高度。不幸的是，没有办法在 css 中解决这个问题。您可以使用固定高度而不是相对高度，或者在加载时使用 javascript 设置高度。