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

时间:2017-12-20 11:18:52

标签: css google-chrome responsive-design

我的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)中处于移动模式时,一切看起来都不错:

enter image description here

但在真正的移动浏览器上,这种背景变得太大了:

enter image description here

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

2 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:0)

尝试添加内部HEAD:

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