CSS 背景图在手机上莫名放大

Question

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

我正在 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）打开网站时。 可以看到背景图片被超级放大了：

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

Answer 1

可能是因为background-size: cover; . 取决于你可以滚动多少。 我会改变这个属性： background-repeat: repeat-y; . 我也发生过一次。

Answer 2

不知何故，我错过了这个问题，它说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;
}

这解决了这个问题。