jQueryのサイズ変更機能がChromeで動作しません

Question

ページの上部に大きい幅のヘッダー画像を含むウェブページがあり、その幅と高さ全体を占めています。私は、URLバーが消えたときにモバイルで起きる奇妙なサイズ変更の問題を回避して、非常に役立つスニペットをオンラインで見つけました。下のコードを含める前に、ビューの高さが大きくなるため、URLバーが消えるとヘッダーイメージのサイズが大きくなります。 iOS Chromeアプリで問題が解決されない限り、コードは完全に機能します。ここの助けが大いに評価されました

サファリとクロムのURLバーの高さが異なるため、私はこの問題を解決する新しいアプローチをとることにしました。これは望ましくない複雑さを引き起こし、調整作業を両方のブラウザで完全に行うことは困難です。私が取っている新しいアプローチは、タブレットやモバイルでウェブページを見るときに、高さを表示時の高さに設定し、それをその高さに維持することです。私はこれまでのところ、jQueryのコードを更新しましたが、まだ期待どおりに動作しません。

LINK TO WEBPAGE

HTML：

<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 --> 

のjQuery：

if ($(window).width() <= 1024) { 
var bg = $(".intro-bg-item-image, .intro-bg-item, .intro-bg, .caroufredsel_wrapper"); 
function resizeBackground() { 
    bg.height($(window).height()); 
} 
$(window).load(resizeBackground); 
resizeBackground(); 

}

Answer 1

メディアクエリを試しすることがありますか？ JSがブラウザのリサイズをリッスンするのではなく、特定のブラウザをターゲットにするよりもリットルになります。

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries