Css 背景图像在手机上放大过多

我的RWD页面有奇怪的问题。我有以下样式的背景图像：

#background-image {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  position: absolute;
  z-index: -1;
  background-image: url('../landing.jpeg');
  background-attachment: fixed;
  background-size: cover;
  background-position: 85% 50%;
  background-repeat: no-repeat;
}

当我在Chrome DevTools（以及FF）中处于移动模式时，一切看起来都正常：

但在真正的移动浏览器上，此背景变得太大：

---

原因可能是什么？我的移动浏览器是Android上的Chrome 63，而我的桌面浏览器是Ubuntu上的Chrome 59。

尝试添加内部头部：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

---

尝试添加内部头部：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

---

这是因为

后台附件：已修复

设置在移动浏览器上不起作用

尝试删除

背景附件

属性，并将

位置

道具更改为

固定

，如下所示：

#background-image {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  position: fixed;
  z-index: -1;
  background-image: url('../landing.jpeg');
  background-size: cover;
  background-position: 85% 50%;
  background-repeat: no-repeat;
}

---

希望这会有帮助…

这是因为

后台附件：已修复

设置在移动浏览器上不起作用

尝试删除

背景附件

属性，并将

位置

道具更改为

固定

，如下所示：

#background-image {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  position: fixed;
  z-index: -1;
  background-image: url('../landing.jpeg');
  background-size: cover;
  background-position: 85% 50%;
  background-repeat: no-repeat;
}

---

希望这将有助于…

那么，我应该删除它吗？我添加它只是为了解决谷歌地图的问题…

那么，我应该删除它吗？我添加它只是为了解决谷歌地图的问题…我已经有了这个没有

最大比例

和

用户可缩放

设置的标签，尽管我按照你的建议添加了它，但它不起作用。我已经有了这个没有

最大比例

和

用户可缩放

设置的标签，尽管我按照你的建议添加了它，但它不起作用。