如何使用 JavaScript 检测设备方向？

Question

我见过很多检测设备屏幕方向的方法，包括使用检查来测试 innerWidth 与 innerHeight，就像这样。

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 的设备模拟器）。

Answer 1

有两种方法可以做到这一点：

首先，根据 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]);
};

其次，为了与 Safari 等不兼容 Screen 的其他浏览器兼容，this post 表明您可以在 window 调整大小时继续使用 innerWidth 和 innerHeight。

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

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

如何使用 JavaScript 检测设备方向？

How to detect device orientation with JavaScript?

javascript

android

jqtouch

cordova