修复了在移动设备上滚动时背景图像放大的问题

Question

这是我的第一个问题。正如标题所说，我在移动设备上遇到固定背景图像的问题。当我向下滚动时，它会稍微放大，当我向上滚动时，它会恢复到原始大小。我不明白为什么。在提问之前，我浏览了所有关于这个主题的已经提出的问题，我也问了几个朋友，但老实说我还没有找到答案。

这是我的 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

这对我有用，主要是

background-size: cover;

height: 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;

修复了在移动设备上滚动时背景图像放大的问题

Fixed background image zooms in when scrolling on mobile

html

css

css-position

background-image