Question

此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
}

Answer 1

body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: url(../img/background.jpg) center repeat-x fixed;
}

Answer 2

我放弃了尝试让我的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的东西。

奇怪的是，这个代码只有在应用于div时才能在iPhone上运行。如果我尝试将其直接应用于html或body，则无效......

CSS背景延伸到填充Safari上的屏幕但不在iOS上

2 个答案: