修复了在iPad和iPhone上无法正常工作的背景img_Iphone_Ios_Css_Background Image_Fixed

修复了在iPad和iPhone上无法正常工作的背景img

iphone ios css

修复了在iPad和iPhone上无法正常工作的背景img,iphone,ios,css,background-image,fixed,Iphone,Ios,Css,Background Image,Fixed,关于ios（iPad/iPhone）上Safari的背景图像，我有几个问题。在常规浏览器上，一切都可以正常工作。图像应该是固定的，并填满屏幕在ios safari上，背景图像会显示并固定在后面。但是，图像的高度是由内容高度设置的。这意味着当我在页面上的内容很少时，图像会正确显示，但当我的内容较长时，我只能看到背景图像的顶部（图像会拉伸，但保持正确的比例）用于切换背景图像的js代码在ios safari上没有任何作用这是我的html <html> <head>

关于ios（iPad/iPhone）上Safari的背景图像，我有几个问题。在常规浏览器上，一切都可以正常工作。图像应该是固定的，并填满屏幕

在ios safari上，背景图像会显示并固定在后面。但是，图像的高度是由内容高度设置的。这意味着当我在页面上的内容很少时，图像会正确显示，但当我的内容较长时，我只能看到背景图像的顶部（图像会拉伸，但保持正确的比例）

用于切换背景图像的js代码在ios safari上没有任何作用这是我的html

<html>

<head>
    Some head stuff
</head>

<body>

    <div class="pagewrap">

        <header class="header">
            <div class="menu">
                Some header stuff
            </div>
        </header>

            <div class="full-page-background fullheight"></div>

        <div class="wrap">

            <div class="main">
                Some content
            </div>

        </div>

        <aside class="sidebar">
            <nav class="mobnav">
                My mobile nav
            </nav>
        </aside>

    </div>

    <div class="custom-background">
        A placeholder for a custom background image
    </div>

</body>

</html>

下面是js for.fullheight，以确保它填充了浏览器窗口的高度

$(document).ready(function() {
    var bodyheight = window.innerHeight ? window.innerHeight:$(window).height(); 
    $(".fullheight").height(bodyheight);
});

// for the window resize
$(window).resize(function() {
    var bodyheight = window.innerHeight ? window.innerHeight:$(window).height(); 
    $(".fullheight").height(bodyheight);
});

这是js for.custom background-如果div中有一个图像（由用户放置在cms中），它会将默认图像切换为新图像。在桌面上运行良好，但在ios safari上没有任何功能

$(".background-image").each(function() {  
    imgsrc = this.src;

    $('.full-page-background').css({
        background:'url(' + imgsrc +') no-repeat fixed center center / cover  transparent'
    });
});

我在这里找到了这个插件：

它似乎适用于所有设备上的全尺寸背景图像（我测试过的所有设备都是如此！）。其中包括ios上的Safari。

我在这里找到了这个插件：

它似乎适用于所有设备上的全尺寸背景图像（我测试过的所有设备都是如此！）。其中包括ios上的Safari

$(".background-image").each(function() {  
    imgsrc = this.src;

    $('.full-page-background').css({
        background:'url(' + imgsrc +') no-repeat fixed center center / cover  transparent'
    });
});