CSS background-image 在手机上莫名其妙放大答案

【问题标题】：CSS background-image inexplicably zooming in on mobileCSS background-image 在手机上莫名其妙放大
【发布时间】：2022-01-30 02:19:35
【问题描述】：

对不起，如果这已在其他地方得到回答；我能找到提到的这个问题的唯一其他地方是here，但那里给出的答案似乎与我的网站无关，但我很高兴被证明是错误的。

我正在使用 Next.js 开发一个站点（尽管我认为该框架不相关，因为该项目曾经是 create-react-app 并且发生了同样的问题）并且我们的站点背景是固定的-天空图像。我通过在我的全局 app.scss 文件表中执行此操作将其应用到整个站点：

html {
    background-image: url(../public/images/background.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-color: black;
}

这在我的桌面浏览器上完美运行——适用于所有视口尺寸。 第一个屏幕截图是使用 Chrome 的 devtools 模拟移动显示时网站的外观，在使用该视口和所有内容从头开始重新加载网站后。 第二张屏幕截图是从实际移动设备（Chrome 移动浏览器上的 iPhone XS）打开网站时。可以看到背景图被超级放大了：

我不知道如何检查手机浏览器上应用的样式，因此很难找出原因。有人有什么想法吗？

【问题讨论】：

您可能希望将 html 标签的高度和宽度设置为html{...; width:100%; height:100%} 或html{...; width:100vw; height:100vh}。如果您针对特定设备，请减小背景图像的尺寸和文件大小以缩短加载时间。现在看起来图像具有更大的尺寸和更高的分辨率。

标签： html css mobile background-image

【解决方案1】：

可能是因为background-size: cover; 而延长。取决于你可以滚动多少。我会更改此属性：background-repeat: repeat-y;。我也遇到过一次。

【讨论】：

这没有解决，抱歉 :(
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

不知何故，我错过了this 的问题，它说background-attachment: fixed 在移动浏览器上不受支持。所以我放弃了将图像作为背景应用到 html 元素，而是添加了 <div id="background" /> 的样式：

#background {
    z-index: -1;
    background-image: url(../public/images/background.jpg);
    height: 100vh;
    width: 100vw;
    position: fixed;
    background-size: cover;
    background-position: center;
}

这解决了问题。

【讨论】：