デバイスの向きを変更しても幅と高さが入れ替わらない

Question

ウィンドウのサイズ変更時に画面サイズに合わせて背景イメージのサイズを設定しようとしています。問題は、モバイルの向きを変更すると、幅と高さが値を交互に使用しないことです。デスクトップブラウザの開発ツールでテストすると、動作しますが、いくつかのモバイルブラウザでテストすると、向きは変わりますが、対策はありません。

これは基本的なJSです：残念ながら原因私はJSを使用するように強制していiOSの奇妙なVHのバグに

$(function() { 

    function resizeBackground() { 
     $('#background-image').height(screen.height); 
    } 

    resizeBackground(); 
    $(window).resize(resizeBackground); 

}); 

。ここで問題となるのは、一部のブラウザ、特にChromeとFirefoxのブラウザのアドレスバーが非表示になったときに背景画像がジャンプすることです。詳細はこちら：stackoverflow.com/questions/24944925/。

Answer 1

これらのモバイルブラウザは、より具体的なorientationchangeイベントをサポートする必要があります。おそらく、彼らはただ一つを発射していて、サイズを変更していないでしょう。 orientationchangeも処理してみてください。

window.screen.heightとwindow.screen.widthはあなたのデバイスの実際の高さと幅を取得し、これらの値は、ページサイズ変更や姿勢変化に変更されません。

window.addEventListener('orientationchange', resizeBackground); 

Answer 2

私はあなたのソリューションが動作しない理由を説明したい私のコメントをまとめます。ビューポートのサイズ（あなたが実際にビューポートを必要とする）適切な方法（変数）については

はwindow.outerWidthとwindow.outerHeight（いくつかのケースでwindow.innerWidthとwindow.innerHeightも動作します）です。

実際のドキュメントサイズ（HTMLドキュメント）を取得するには、document.documentElement.clientWidthとdocument.documentElement.clientHeightを使用してください。

オリエンテーションの変化を検出するために、onresizeイベントの代わりにorientationchangeイベントを提案します。onresizeは、たとえばキーボードが表示されているときに発生します。