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

问题描述：

这个CSS成功地拉伸了我的背景图片，以填充100％的屏幕区域，而不是在Safari上滚动，但不在iOS上滚动。我怎样才能防止图像在iOS上滚动？

This CSS successfully stretches my background image to fill 100% of the screen area and not scroll on safari but not on iOS. How can I also prevent the image from scrolling on 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
}

答

我放弃了试图让我的iPhone和CSS搭配得很好，并且不得不求助于使用jQuery。

I gave up trying to get my iPhone to play nicely with CSS, and had to resort to using jQuery.

在我的网页中，我添加了一个

In my webpage, I added a <div> which I want to fill the screen:

<body>
    <div class="cssFullScreen" />
    ...etc...

然后我加了两汤匙CSS .. 。

Then I added in two tablespoons of 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的不情愿......

..and a reluctant scoop of 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上工作的东西。

It's not pretty, but it was the only thing I could find which really worked on an iPhone.

奇怪的是，这段代码只适用于 div 时才工作（在iPhone上）。如果我试图直接将它应用于 html 或 body ，它什么都没做......

And strangely, this code only worked (on an iPhone) when applied to a div. If I tried to apply it directly to the html or body, it did nothing...

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

相关推荐