在iOS Safari上使用全高圖像標題的問題

我目前正在使用一個網站，該網站的所有屏幕尺寸都具有全高度圖像標題。所有這一切都很好，直到我們遇到移動設備的問題時，圖像的大小將在滾動時發生變化，當URL欄消失時。我能夠通過編寫一個jQuery腳本來解決這個問題，該腳本可以設置加載和方向更改的高度，而不是使用CSS規則。這工作得很好，但我遇到了一些新問題。首先，在Safari上，只有移動橫向方向，圖像標題超出屏幕高度。第二個是在iOS Chrome應用程序中，向上滾動時圖像下方會出現黑色空間，並且軟滾動箭頭更改位置。我想知道是否有人可以提供任何見解，說明爲什麼只在這些情況下發生這種情況，或者是否有可能的解決方案。在iOS Safari上使用全高圖像標題的問題

if (($(window).width() <= 1024 && $(window).width() >= 735) || ($(window).width() <= 414)) { 
 
    var bg = $(".intro, .intro-inner, .intro-body, .intro-bg-item-image, .intro-bg-item, .intro-bg, .caroufredsel_wrapper"); 
 
    function resizeBackground() { 
 
     bg.height($(window).height()); 
 
    } 
 
    $(window).load(resizeBackground); 
 
    resizeBackground(); 
 
    
 
    $(window).on("orientationchange",function(event) { 
 
     resizeBackground(); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="intro"> 
 
    <div class="intro-inner"> 
 
    <div class="intro-bg"> 
 
     <div class="intro-bg-item"> 
 
     <div class="intro-bg-item-image" style="background-image: url(css/images/pb/home-banner.jpg)"></div> 
 
     <!-- /.intro-bg-item-image --> 
 
     </div> 
 
     <!-- /.intro-bg-item --> 
 

 
    </div> 
 
    <!-- /.intro-bg --> 
 
    </div> 
 
</div>

LINK TO PAGE

來源

2017-05-04 S. Miller

你有一個視meta標籤設置？

<meta name="viewport" content="width=device-width, initial-scale=1">

來源

2017-05-04 00:36:52

我 '' –

在iOS Safari上使用全高圖像標題的問題

回答

相關問題