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：

return

Answer 3

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

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

如果没有这个，移动媒体标签就没有效果了。

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

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

1）在基本样式之后放置媒体查询。

2）在媒体查询中使用（-webkit-min-device-pixel-ratio：2）。

背景图片未在iOS Chrome中显示

3 个答案: