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

【问题标题】：Fixed background image zooms in when scrolling on mobile修复了在移动设备上滚动时背景图像放大的问题
【发布时间】：2021-02-25 19:50:56
【问题描述】：

这是我的第一个问题。正如标题所说，我在移动设备上固定 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%; 
}

感谢大家的宝贵时间！

【问题讨论】：

为了拯救那些建议你已经尝试过的东西的人，你能告诉我们你已经尝试过什么吗？此外，最好创建一个Minimaly, Complete, and Verifiable Example，以消除筛选代码的需要，并允许更轻松地调试
感谢您的建议，正如我所说的我对此很陌生，我会立即编辑我的问题！

标签： html css background-image css-position

【解决方案1】：

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

【讨论】：

感谢您的回答，它帮助我意识到它只发生在某些视口中，我在其他移动设备上尝试过它并没有发生
很高兴我能帮上忙

【解决方案2】：

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

【讨论】：

【解决方案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;

【讨论】：