logo标签列表

iPad上如何设置固定背景？

htmlcssipadresponsive-design
6

我无法找到一种在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上无法正常工作：背景会出现奇怪的缩放，如下图所示。你能帮我修复一下吗？
谢谢！
附言：这里有一个部分答案（链接），使用background-attachement:scroll。但是不太理想。 enter image description here
2个回答
1
0
简单的答案是：在iPad上使用“cover”时，没有办法使背景图片正确显示。
我不确定所有移动设备是否都如此，但苹果移动设备（iPad、iPhone）不会像您期望的那样显示background-size: cover。
为您要定位的最大尺寸设置媒体查询（或使用JavaScript根据设备类型设置类），然后执行以下操作：
background-attachment: fixed;
background-size: auto 100%;

你可以尝试调整背景大小属性，或者在这些设备上显示完全不同的背景图像，一个横向和一个纵向，然后相应地进行显示。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接