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 的开发工具模拟移动显示时网站的外观，在使用该视口和所有内容从头开始重新加载网站后。 第二个屏幕截图 是从实际移动设备（Chrome 移动浏览器上的 iPhone XS）打开网站时的截图。可以看到背景图片超级放大：

我不知道如何检查我的 phone 浏览器上应用的样式，因此很难找出造成这种情况的原因。有人有什么想法吗？

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;
}

这解决了问题。

CSS 背景图像在移动设备上莫名其妙地放大

CSS background-image inexplicably zooming in on mobile

html

css

mobile

background-image