モバイルでは、画面の向きが横長で、縦長のときにオーバーレイを表示するにはどうすればよいですか？

Question

モバイルデバイス上にオーバーレイを表示したいオリエンテーションが横長のときはいつでもポートレートモードに切り替えるように警告し、更新することなく縦向きが検出されたときにオーバーレイを削除したいページ。私のコードは現在動作しますが、ページがリフレッシュされたときだけです。

私は例としてjsfiddleを作成しましたが、実際のコードは以下のように異なりますが、私の考えは同じです。結果ウィンドウを横長にリサイズし、ヒットランを適用してオーバーレイが適用されていることを確認してください。私の目標は、JSを再度実行したり、ページを更新したりせずに適用することです。

JS FIDDLE例：https://jsfiddle.net/mrx7a0q5/

ACTUAL JS IMの使用：このような

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && (window.innerWidth > window.innerHeight) == true) { 

    $('.ls-overlay').css("display", "block"); 
    console.log("displaying"); 
} else { 
    $('.ls-overlay').css("display", "none"); 
    console.log("not displaying"); 

} 

Answer 1

何かがあなたを助けることができる：最初に上記

// Listen for orientation changes 
window.addEventListener("orientationchange", function() { 
    // Announce the new orientation number 
    //alert(screen.orientation); 

    var orr = screen.orientation; 

    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && (window.innerWidth > window.innerHeight) == true) { 
    if (orr =='0'){ 

    ///portrait view/// 
$('.ls-overlay').hide(); 


    } else if(orr =='-90'){ 

    ///landscap view/// 
    $('.ls-overlay').show(); 



    } 

} 
}, false); 

コードは、イベントリスナーを追加し、をリッスンorientationchangeを入力し、向きを変更すると、ユーザーの端末が携帯端末かタブレットかを確認し、次に変数orrは0、それはポートレイトビューのものを行い、その場合は-90、それは風景ビューのものを行います。あなたがこれを読むことができるorientationchangeの詳細については

：

Detect change in orientation using javascript

jQuery mobile orientationchange