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

Posted 2021-05-02

我的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。

答案

这是因为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;
}

希望这会有所帮助......

另一答案

尝试添加内部HEAD：

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