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上）。这可能需要一些时间，但使用移动优化的图像集非常值得。

移动Safari上的CSS背景问题

3 个答案: