经过一些实验，我发现旋转一个方向感知设备总是会触发浏览器窗口的调整大小事件。因此，在你的resize处理程序中，简单地调用这样一个函数:

function is_landscape() {
  return (window.innerWidth > window.innerHeight);
}

screen.orientation.addEventListener("change", function(e) {
 console.log(screen.orientation.type + " " + screen.orientation.angle);
}, false);

获得方向(在任何时间在你的js代码)通过

window.orientation

当窗口。方向返回0或180则处于竖屏模式，返回90或270则处于横屏模式。

在iOS设备上，JavaScript中的window对象有一个orientation属性，可以用来确定设备的旋转。下面显示了值窗口。面向iOS设备(如iPhone, iPad, iPod)在不同方向。

这个解决方案也适用于android设备。我检查了android原生浏览器(互联网浏览器)和Chrome浏览器，甚至是旧版本的浏览器。

function readDeviceOrientation() {                      
    if (Math.abs(window.orientation) === 90) {
        // Landscape
    } else {
        // Portrait
    }
}

不要尝试固定窗口。方向查询(0,90等并不意味着纵向，横向等):

http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/

即使在iOS7上，0也不总是竖屏的，这取决于你进入浏览器的方式

iOS不更新屏幕。宽度和屏幕。方向改变时的高度。Android不更新窗口。当它改变方向时。

我对这个问题的解决方案是:

var isAndroid = /(android)/i.test(navigator.userAgent);

if(isAndroid)
{
    if(screen.width < screen.height){
        //portrait mode on Android
    }
} else {
    if(window.orientation == 0){
        //portrait mode iOS and other devices
    }
}

你可以通过以下代码在Android和iOS上检测这种方向变化:

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    alert("the orientation has changed");
}, false);

如果onorientationchange事件不受支持，事件绑定将是resize事件。