背景图像在移动设备上放大太多答案

【问题标题】：Background image zoomed too much on mobile背景图像在移动设备上放大太多
【发布时间】：2017-12-20 23:32:16
【问题描述】：

我的 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" content="initial-scale-1">
那么，我应该删除它吗？我刚刚添加它是为了解决 Google 地图的问题...

标签： css google-chrome responsive-design

【解决方案1】：

这是因为background-attachment: fixed 设置不适用于移动浏览器...

尝试删除background-attachment 属性并将position 属性更改为fixed，如下所示：

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

希望这会有所帮助...

【讨论】：

【解决方案2】：

尝试在 HEAD 内部添加：

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

【讨论】：

我已经有了这个没有maximum-scale 和user-scalable 设置的标签，尽管我按照你的建议添加了它 - 并且不起作用。