这个CSS成功延伸我的背景图片来填充屏幕面积的100%,在Safari上而不是在iOS上不滚动。 我怎么也防止图像滚动iOS上?
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
background: url(../img/background.jpg) center repeat-x;
background-size: auto 100%;
background-attachment: fixed
}
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
background: url(../img/background.jpg) center repeat-x fixed;
}
我放弃了试图让我的iPhone与CSS发挥很好,而不得不求助于使用jQuery。
在我的网页上,我添加了一个<div>
我要填满屏幕:
<body>
<div class="cssFullScreen" />
...etc...
然后我说在CSS的两汤匙...
<style>
.cssFullScreen
{
position: absolute;
left:0px;
top:0px;
background: url(BackgroundImage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
..和jQuery的的不情愿瓢...
<script src="jquery-2.2.3.min.js"></script>
<script type="text/javascript">
$().ready(function () {
ResizeWindows();
$(window).resize(function () {
ResizeWindows();
});
});
function ResizeWindows() {
// When the user resizes the window, we'll resize any DOM elements
// with the "cssFullScreen" class.
var width = window.innerWidth ? window.innerWidth : $(window).width();
var height = window.innerHeight ? window.innerHeight : $(window).height();
$(".cssFullScreen").width(width);
$(".cssFullScreen").height(height);
}
</script>
它不漂亮,但它是我唯一能找到的东西真正地在iPhone上工作。
而奇怪的是,当应用于此代码只工作(在iPhone) div
。 如果我试图直接套用到html
或body
,它什么也没做......