CSS background-image 无法在 iPhone 设备上正确显示（但适用于 Android 和 chrome “iPhone 视图”）答案

【问题标题】：CSS background-image is not showing correctly on iPhone device (but works on Android and on chrome "iPhone view")CSS background-image 无法在 iPhone 设备上正确显示（但适用于 Android 和 chrome “iPhone 视图”）
【发布时间】：2017-04-02 13:42:27
【问题描述】：

从 IOS 设备查看我的站点时，背景图像显示不正确。它可以在其他设备上完美运行，例如 Android、PC 和 MAC 网络浏览器。

我已经设置了引导模板附带的这些 CSS 元素并尝试了不同的组合：

#header {
background-image:url(../img/HS_16.jpg);
-webkit-background-size:;
-moz-background-size:cover;
-o-background-size:;
background-size:cover;
background-position:center center;
background-attachment:fixed;
background-repeat:no-repeat;
position:relative;
min-height: 512px; 
}

有点难以解释，但是如果您从 IOS 设备转到 http://holistiskasystrar.se 并将其与任何其他设备进行比较，您就会明白我的意思了。

Click her for example, Left is iPhone, right is chrome

【问题讨论】：

如果您发布您在这些不同浏览器上看到的内容的图片，您可能会得到更多问题的答案。仅仅链接到外部网站并没有多大帮助。

标签： html ios css iphone twitter-bootstrap

【解决方案1】：

已知 iOS Safari 在 background-size: cover; 上存在错误行为。和背景附件：固定；

它在此处的“已知问题”选项卡下列出：http://caniuse.com/#search=background-size

但是网上有一堆变通办法，比如CSS background-size: cover replacement for Mobile Safari

【讨论】：