背景图像在 iPad 或 iPhone 上不显示/被拉伸答案

【问题标题】：background images don't show/are stretched on iPad or iPhone背景图像在 iPad 或 iPhone 上不显示/被拉伸
【发布时间】：2017-07-27 04:36:07
【问题描述】：

我在 github 页面上有一个 website，它可以在任何桌面浏览器上完美运行。但是，我的两个背景图片不会显示在移动设备上（我只测试过 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%，则图像会加载，但它们会被垂直拉伸。有什么建议吗？

【问题讨论】：

标签： html css iphone ipad background-image

【解决方案1】：

您可以：

使用固定位置，背景位置为center center：参见“CSS background-size: cover replacement for Mobile Safari”。
This page 也指background-attachment: fixed;，同时提醒使用该视口值（例如vh和vw) 在iOS 7 上得到技术支持，但根本不起作用，因此rodneyrehm/viewport-units-buggyfill 项目。
或者（不太优雅），对给定大小的媒体使用固定大小：参见“Background image not displayed properly on iPad and iPhone”

【讨论】：

【解决方案2】：

看起来您的背景尺寸属性和背景高度属性存在竞争高度。查看CSS-Trick's post on background-sizes for a better implementation。由于看起来您想用图像覆盖页面的宽度，请改用background-size:cover。希望这会有所帮助。

【讨论】：

【解决方案3】：

使用这个

/* Image is centered vertically and horizontally at all times */
background-position: center center;

/* Image doesn't repeat */
background-repeat: no-repeat;

/* Makes the image fixed in the viewport so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;

/* This is what makes the background image rescale based on its     container's size */
background-size: cover;

【讨论】：

【解决方案4】：

似乎 iPhone 忽略了 @media 设备的 handheld 规则（请参阅此处 Do iPhone / Android browsers support CSS @media handheld? ）。如果图像不是正方形，则赋予100% 100% 的background-size 属性将使图像被拉伸。

因此您可以使用max-width 媒体查询来检测移动设备并将background-attachment 设置为scroll。并使用background-size: cover 或背景大小：100% auto

【讨论】：