网站背景在移动设备上放大

Question

方案

我正在为客户建立一个网站，该网站在本地和外部在桌面上运行良好，但在移动设备上它不起作用，背景图像非常放大。但是当我使用chrome devtools并将视图更改为移动设备时查看一切按预期工作。

这是一张应该是什么样子的图片。

这是一张它的样子。

这是标题元素的CSS。

.header {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("../img/header-2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}

问题

为什么会发生这种情况，为什么chrome devtools显示好像一切都好？

如果您需要更多信息，请询问并提供错误。

修改

这种情况在IOS设备上发生。每个人都要求测试，有一个IOS设备已经向我展示了图像被大幅放大的相同屏幕截图。

Answer 1

试试这个

 @media screen and (max-width: 992px) {
    .header {
        background-attachment: scroll;
    }
}