背景图片不会在平板电脑和手机上显示

Question

背景图片在PC和模拟器（平板电脑和手机）上完美显示，但它不会在实际的手机/平板电脑上显示。

码

div#photo_break {
  @include viewport-unit(height, 28vw);
  background-image: url('<img>');
  background-repeat: no-repeat;
  background-size: 100% auto;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-position: center top;
  background-attachment: fixed;
  z-index: 99999;
}

website

正如您在此图片中看到的那样，在Chromes simulator中会显示图片。

图像的大小不是很大，不是吗？

Answer 1

不错的网站。 ：D我们试着解决你的问题。

确保您在任何媒体查询中没有该CSS代码，因为它可能会阻止该内容。

您可能还尝试使用与移动设备相同的CSS添加新的媒体查询，例如此@media (min-width: 481px) { }。

在再次加载网站之前清理移动浏览器的缓存。

Answer 2

您的背景图片宽度为12,000像素。加载到需要很长时间，我建议在标题内部将父div的背景设为黑色，然后将图像放入该人作为该容器中元素的背景（如果有意义的话）。保存您的移动用户数据！

Answer 3

mobile和tablet browsers不支持background-attachment: fixed。

改变这个，解决了问题