CSS - 避免在iOS浏览器上滚动后调整背景图像的大小

Question

我目前正在制作一个网站，在其中使用了一个带有背景图片的 div，以保持其在 iOS 上即使是固定的属性。代码如下：

HTML：

<div id="background" style="background-image: url(bi.jpg);"></div>

CSS：

#background{
    position:fixed;
    height: 100%;
    width: 100%;
    z-index:-1;
    display:block;
    background:no-repeat 50% 0%;
    background-size:cover;
}

这对于大多数视口大小都很好用，但在iOS Safari浏览器上，当用户向下滚动时，顶部的工具栏会缩小。这改变了视口高度，cover属性试图弥补这一点，因此在滚动完成后会自动调整到稍微新的大小。有没有办法确保背景图像覆盖整个屏幕，并且在滚动后不会改变？这可能需要一些JS，但我不确定。谢谢。

- tcallred

Answer 1

尝试在你的 #background 上添加 background-attachment: fixed;，这样应该就能解决问题了。

- Raad Altaie

Answer 2

我通过编写一个脚本来解决这个问题，当浏览器是iOS Safari时运行。它获取屏幕的高度并将背景设置为该高度，使得当视口在滚动时重新调整大小时，整个图像不会重新调整大小，而是继续保持原样。

function checkSafari(){
    "use strict";
    var height = $(window).height();
    var heightAdd = height + 40;            // add __ px to background height
    var heightAddMore = heightAdd + 30;     // add more for case iphone
    var userAgent = window.navigator.userAgent;

    if (userAgent.match(/iPad/i)) {
       $("#background").css({"background-size":"auto " + heightAdd +"px"});
    }
    else if(userAgent.match(/iPhone/i)) {
       $("#background").css({"background-size":"auto " + heightAddMore +"px"});
    }
}

但是当用户更改方向时，这将使背景大小不正确，因此我制作了另一个函数，在方向更改时重新运行此函数。

function detectOrientation(){
    "use strict";
    var userAgent = window.navigator.userAgent;
    if(userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)){
        $(window).on("orientationchange", function(event){
            checkSafari();
        });
    }
}

- tcallred