iOS Chrome 中不显示背景图片

Question

我遇到了一个特殊的问题：我页面上 div 的背景图像在我的计算机的网络浏览器上运行良好，并且在 iOS 版 Safari 上正常运行，但适用于 iOS 的最新版 Chrome (v46) 可以不显示图片：

http://winstoncb.com/wp-content/themes/gridsby/test/test2.html

进一步观察：

• 在 Chrome iOS 上等待的时间再多也没用 - 它永远不会加载
• 如果我返回主屏幕然后再次进入 Chrome，图像仍然不显示
• 如果我返回主屏幕，打开另一个应用程序（LinkedIn、Safari 等），然后返回主屏幕，然后返回 Chrome……通常图像会显示！然而，它很挑剔——如果我把手机调到横向模式，图像就会再次消失。当我转回纵向时，它仍然消失了。

@media screen and (max-width: 500px) {
  div#hero {
    max-height: 400px;
    background: url('http://winstoncb.com/wp-content/themes/gridsby/images/WCB-rectangle2-low-mobile.jpg') no-repeat;
  }
}

@media screen and (max-width: 400px) {
  div#hero {
    background: url('http://winstoncb.com/wp-content/themes/gridsby/images/WCB-rectangle2-low-mobile.jpg') no-repeat;
    background-position: 37% top;
    max-height: 400px;
  }
}

/* HERO IMAGE */
div#hero {
  display: block;
  width: 100%;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1500px;
  background: url('http://winstoncb.com/wp-content/themes/gridsby/images/WCB-rectangle2-low.jpg') no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: 37% top;
}
}

<div id="hero"></div>

这似乎是很多人都会遇到的问题，但我没有看到太多关于它的帖子。如果您能指出正确的方向，非常感谢。

温斯顿

Answer 1

试试这个

background: transparent url("http:your url/images/page-menu-background.png") no-repeat scroll 0% 0% / cover;

Answer 2

我一直在玩它，iOS 上的 Chrome 似乎在缩放大图像方面存在问题。您编写 CSS 的方式导致 Chrome 尝试显示 image in original size 4097x2356px，而不是 mobile version。

当我更新 CSS 以便 iOS 上的 Chrome 加载较小尺寸的图像时，一切正常。

另外，请确保将媒体查询放在基本样式之后。

更新的 CSS：

/* HERO IMAGE */
div#hero {
  display: block;
  width: 100%;
  max-width: 1500px;
  height: 500px;

  margin-left: auto;
  margin-right: auto;

  background: url('http://winstoncb.com/wp-content/themes/gridsby/images/WCB-rectangle2-low.jpg') no-repeat;

  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

  background-position: 37% top;
}

/*
  max-device-width set to 1024px means that it will be used for all iPads and
  iPhones, including iPhone 6s plus
  @see http://stephen.io/mediaqueries/
*/
@media screen and (max-device-width: 1024px) {
  div#hero {
    background-image: url('http://winstoncb.com/wp-content/themes/gridsby/images/WCB-rectangle2-low-mobile.jpg');
  }
}

Answer 3

感谢@Jan Vlcek，您的回答让我走上了正确的道路。经过更多的实验，我意识到这里有几个关键部分：

我以前没有的最重要的事情是我脑海中的以下元标记：

没有这个，移动设备的媒体标签就没有效果。

其次，为了解决主要问题——即图像没有显示在我的 iPhone 6 上——它有助于使用 ma​​x-device-width 而不是 ma​​x-width 就像你建议的那样。

以下是一些可能有所帮助的其他事项：

1) 将媒体查询放在基本样式之后。

2) 在媒体查询中使用 (-webkit-min-device-pixel-ratio: 2)。