在移动版

Question

这是我的第一个问题。 正如标题所说，我在移动设备上遇到了固定bg图像的麻烦。当我向下滚动时，它会进行小幅放大，当我向上滚动时，它会回到原始大小。我不明白为什么。 在询问之前，我经历了所有关于这个主题的问题，我也问了几个朋友，但老实说我还没找到答案。

这是我的website我遇到此问题，请在您的移动浏览器中打开它。

这是我的Github存储库，您可以在其中查看我的所有代码。

这是我正在使用的一些东西，我在其他相关帖子中找到了：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

CSS

.bg {
     background: url(./app/assets/images/2.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    width: 100%; 
}

谢谢大家的时间！

Answer 1

无论出于何种原因，您的网站似乎没有问题 如果从手机查看，您确定屏幕上没有另一根手指或灰尘或液体吗？ 如果从PC上查看，请确保在尝试滚动时没有单击Ctrl按钮 这些都是模拟缩放。

Answer 2

在这里晚了将近四年，但根据描述和它只发生在某些视口上的事实，听起来您的问题是由于移动浏览器的地址栏隐藏时图像的大小如何调整。更详细的解释见this；目前 Safari 和 Chrome 似乎有解决方案。

Answer 3

这对我有用，这里的主要内容是

<块引用>

背景尺寸：封面；

<块引用>

高度：100vh;

 content: '';  
 position: fixed; /* Important */
 top: 0px;
 left: 0px;
 z-index: -1; 
 height: 100vh;
 width: 100%;
 background: url('<?php echo $background_image;?>');
 opacity: 0.8;
 background-repeat: no-repeat;
 background-position: center;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;