html - 手机端放大的网站背景

Question

场景

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

这是它应该是什么样子的图像。

这是它的外观图片。

这是标题元素的 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;
    }
}