2016-04-15 12 views
5

このように、innerWidthとinnerHeightをテストするためのチェックを使用するなど、デバイスの画面の向きを検出する方法はいくつかあります。JavaScriptでデバイスの向きを検出する方法は?

function getOrientation(){ 
    var orientation = window.innerWidth > window.innerHeight ? "Landscape" : "Primary"; 
    return orientation; 
} 

しかし、私はをチェックしたい場合にはイベントリスナーでも同様に画面の向きでを変えますか?私はこのコードを試しましたが、それは私のためには機能しません。

function doOnOrientationChange() 
    { 
    switch(window.orientation) 
    { 
     case -90: 
     case 90: 
     alert('landscape'); 
     break; 
     default: 
     alert('portrait'); 
     break; 
    } 
    } 

    window.addEventListener('orientationchange', doOnOrientationChange); 

    // Initial execution if needed 
    doOnOrientationChange(); 

デバイスの方向は検出されず、リスナーは私に登録しません(私はChromeのデバイスエミュレータを使用しています)。

答えて

12

二これ行う方法:> =クロム38、Firefoxを使用して、Screen APIドキュメントごとに、まず

は、とIE 11、画面オブジェクトは、方向を表示するだけでなく、登録していないだけに提供されていますデバイスの向きが変更されるたびにリスナーが表示されます。

screen.orientation.typeが明示的に向きが何であるかを知っているだろう、とリスナーのためにあなたのような単純なものを使用することができます。

screen.orientation.onchange = function(){ 
    // logs 'portrait' or 'landscape' 
    console.log(screen.orientation.type.match(/\w+/)[0]); 
}; 

第二に、スクリーンとの互換性はありませんSafariのような他のブラウザとの互換性のために、 this postは、ウィンドウのサイズ変更でinnerWidthとinnerHeightを引き続き使用できることを示しています。

function getOrientation(){ 
    var orientation = window.innerWidth > window.innerHeight ? "Landscape" : "Portrait"; 
    return orientation; 
} 

window.onresize = function(){ getOrientation(); } 
+0

この解決策は、Chrome> = 39およびスマートフォンのFirefox Mobileでのみ有効です。 OPがタグ "ios"を追加しました。スクリーンAPIはそのための解決策ではありません。 – Popatop15

関連する問題