web-dev-qa-db-ja.com

JavaScriptでデバイスの向きを検出する方法は？

チェックを使用してinnerWidthとinnerHeightをテストするなど、デバイスの画面の向きを検出する方法をいくつか見てきました。

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

しかし、イベントリスナーを使用して、画面の向きでもchangesを確認したい場合はどうすればよいですか？私はこのコードを試してみたが、それは私のために動作しません。

  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のデバイスエミュレーターを使用しています）。

javascriptandroidcordovajqtouch
7
Fahd Sheikh

これを行うには2つの方法があります。

まず、 Screen API ドキュメントに従って、> = Chrome 38、Firefox、およびIE 11を使用して、画面オブジェクトは向きを表示するだけでなく、デバイスの向きが変わるたびにリスナーを登録することもできます。

screen.orientation.typeは、向きが何であるかを明示的に通知します。リスナーには、次のような単純なものを使用できます。

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

次に、Screenと互換性のないSafariなどの他のブラウザとの互換性のために、 この投稿 は、ウィンドウのサイズ変更で引き続きinnerWidthとinnerHeightを使用できることを示しています。

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

 window.onresize = function(){ getOrientation(); }
14
Fahd Sheikh