Question

我无法找到在iPad上正确显示单页网站背景图片的方法。

我在视口中有固定的背景，页面在背景上滚动。页面结构如下：

<body class="landing-1-b">
    <div class="container">
        <section class="intro viewportheight_min" id="intro" class="currentSection">
        ...
        </section>
        <section class="keys viewportheight_min" id="keys">
        </section>
        ....
    </div>
</body>

而css是：

body, html, .container, section {
    height: 100%;
    margin:0;
    font-family: "FuturaStd-Light", "sans-serif";
}
html {
    background: url(../img/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这可以在桌面浏览器上完美地工作，就像你在网站boardlineapp.com上一样，但它在ipad上不起作用：背景奇怪地缩放，你可以在下面的iPad屏幕截图中看到。你能帮我解决这个问题吗？

由于

ps：有一个带有background-attachement的部分答案here：scroll。但这并不令人满意。

enter image description here

Answer 1

这个人在这种情况下使用jQuery解决方案：

http://blog.mathewcropper.co.uk/2013/12/css-background-size-cover-and-safari-for-ios-7/

我建议在图像上使用不同的裁剪来实现这个特定的方向：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

http://stephen.io/mediaqueries/

Answer 2

简单的答案是：使用“封面”时，无法在iPad上正确显示背景图像。

我不确定所有移动设备，但Apple移动设备（iPad，iPhone）没有像您期望的那样显示background-size: cover。

设置您尝试定位的最大尺寸的媒体查询（或使用javascript根据设备类型设置类）并执行以下操作：

background-attachment: fixed;
background-size: auto 100%;

您可以使用背景大小属性，或者可以在这些设备上显示完全不同的背景图像，一个用于横向，一个用于纵向，并相应地显示它们。

固定在ipad上的背景

2 个答案: