固定在ipad上的背景
Lou*_*uis 6 html css ipad responsive-design
我无法找到一种方法来正确显示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:有是部分答案在这里与背景attachement:滚动.但这并不令人满意.
此人针对这种情况使用了 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/
| 归档时间： |
|
| 查看次数： |
689 次 |
| 最近记录： |