移动 Safari 上的 CSS 背景问题

Question

我正在尝试创建一个全屏 div，到目前为止，它在 chrome、firefox 和 safari 上都能完美运行，但在 ipad 和 iphone 上，背景图像和 div 的大小不成比例。 这是我目前所拥有的：

HTML

<div class="intro">
 (content)
</div>

CSS

.intro {
    width:100%;
    min-height: 100vh;
    margin: 0;
    background-image: url("../img/background.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     height: 100%; 

}

如何在移动 Safari 上解决此问题？ 谢谢

Answer 1

我建议您使用媒体查询来操纵您网站的外观以适应不同的分辨率。如果是这种情况，还建议您在实际设备上测试您的网站，而不是在任何模拟器上测试。

以下是有关如何使用媒体查询的链接： http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

问候

Answer 2

给你。全屏背景。

http://www.minimit.com/articles/solutions-tutorials/fullscreen-backgrounds-with-centered-content

Answer 3

正如上面提到的另一张海报，媒体查询是 RWD 的好习惯。桌面上的全屏网站看起来不错，但在移动设备上经常被夸大，即使是像 iPhone 6+ 这样的大型设备。可能需要在媒体查询中进行一些实验才能使其正确。

还要注意移动设备上图像的文件大小——我最近帮助了一个需要帮助解决类似问题的网站。虽然移动端的显示最终看起来不错，但它只是缩小了用于桌面显示的相同图像，导致性能不佳（即使在 4G LTE 上）。这可能需要一些时间，但使用针对移动设备优化的图像集非常值得。