2013-06-30 109 views
1

我有一些關於ios(iPad/iPhone)上的Safari背景圖像的問題。在普通瀏覽器上一切正常。圖像應該是固定的並填滿屏幕。固定背景img在iPad和iPhone上無法正常工作

  1. 在ios-safari上顯示背景圖像並保持固定在背面。然而,圖像的高度以某種方式由內容高度設置。意思是,當頁面上的內容很少時,圖像顯示正確,但當內容較長時,我只能看到背景圖像的頂部(圖像被拉伸但保持正確的比例)。
  2. 用於切換背景圖像的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> 

這裏是。全頁面背景的CSS

.full-page-background { 
    background: url(/Content/Vixen/img/background02.jpg); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-position:top center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    position: fixed; 
    width: 100%; 
    z-index: 1; 
} 

這裏是.fullheight的JS,以確保它填補了高度瀏覽器窗口。

$(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); 
}); 

這裏是.custom背景js的 - 如果在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' 
    }); 
}); 

回答

相關問題