iOS Safariのフルハイト画像ヘッダーに関する問題

Question

現在、すべての画面サイズで完全な高さの画像ヘッダーを使用しているウェブサイトで作業しています。 URLバーが消えると、スクロール時にイメージのサイズが変わるモバイルデバイスで問題が発生するまで、すべてうまくいっていました。 CSSルールを使用するのではなく、負荷と方向の変更の高さを設定するjQueryスクリプトを作成して、この問題を解決できました。これは非常にうまくいったが、私はいくつかの新しい問題に遭遇した。 1つ目は、モバイルの横向きのSafariのみで、画像のヘッダーが画面の高さを超えていることです。もう1つは、iOS Chromeアプリでは、スクロールアップすると画像の下に黒いスペースが表示され、ソフトスクロール矢印が位置を変えるということです。私は、誰かが、なぜこれらのシナリオでのみ起こっているのか、そこに解決策があるのか​​についての洞察を提供できるかどうかを知りたいと思います。

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

Answer 1

あなたは、ビューポートメタタグセットを持っていますか？

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