html - 背景图像在 iPad 或 iPhone 上不显示/被拉伸(stretch)

Question

我有一个 website在 github 页面上，它可以在任何桌面浏览器上完美运行。但是，我的两个背景图片不会显示在移动设备上(我只测试过 iPad 和 iPhone，它可能只是 IOS)。我已尝试添加媒体查询以确保 background-attachment 属性在手持设备上设置为 scroll(我读过这有时是问题所在)。我还有媒体查询，确保图像不会太大而无法加载。这是我的 html:

<div id="image-1" class="background-image"></div>
<div id="image-2" class="background-image"></div>

这是CSS:

#image-1 {
  background-image: url('imgs/coding.jpg');
}
#image-2 {
  background-image: url("imgs/game.JPG");
}
@media only screen and (min-width: 500px) {
    /* For mobile phones: */
    #image-1 {
      background-image: url("imgs/coding-large.jpg");
    }
    #image-2 {
      background-image: url("imgs/game-large.jpg");
    }
}
@media not handheld {
    .background-image {
      background-attachment: fixed;
    }
}
.background-image {
  opacity: 0.8;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 100% 100vh;
  height: 85vh;
}

如果我将 100vh 更改为 100%，则图像会加载，但它们在垂直方向上会被严重拉伸(stretch)。有什么建议吗？

Answer 1

您可以:

• 使用固定位置，背景位置center center:参见“CSS background-size: cover replacement for Mobile Safari”。
  This page 也指 background-attachment: fixed;，同时提醒使用视口(viewport)值(例如 vh 和 vw)在技术上是受支持的在 iOS 7 上，但根本不起作用，因此出现了 rodneyrehm/viewport-units-buggyfill 元素。
• 或者(不太优雅)，对给定尺寸的媒体使用固定尺寸:参见“Background image not displayed properly on iPad and iPhone”