不同设备的实际行为是不一致的。resize 和orientationChange 事件可以以不同的顺序以不同的频率触发。此外，某些值（例如 screen.width 和 window.orientation）并不总是在您期望的时候发生变化。避免使用 screen.width -- 在 iOS 中旋转时它不会改变。

可靠的方法是同时监听 resize 和orientationChange 事件（使用一些轮询作为安全措施），您最终会得到一个有效的方向值。在我的测试中，Android 设备在旋转完整 180 度时偶尔无法触发事件，因此我还包含了一个 setInterval 来轮询方向。

var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // orientation changed, do your magic here
    }
};

window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);

// (optional) Android doesn't always fire orientationChange on 180 degree turns
setInterval(checkOrientation, 2000);

以下是我测试过的四种设备的结果（对于 ASCII 表很抱歉，但它似乎是呈现结果的最简单方法）。除了 iOS 设备之间的一致性之外，设备之间还有很多变化。注意：事件按它们触发的顺序列出。

|================================================== ================================|
| 设备 | 被解雇的事件| 方向 | 内宽度 | 屏幕宽度|
|================================================== ================================|
| iPad 2 | 调整大小 | 0 | 1024 | 第768话
| （到风景） | 方向改变 | 90 | 1024 | 第768话
|----------------+-------------------+------------ -+------------+--------------|
| iPad 2 | 调整大小 | 90 | 第768话 第768话
| （肖像） | 方向改变 | 0 | 第768话 第768话
|----------------+-------------------+------------ -+------------+--------------|
| iPhone 4 | 调整大小 | 0 | 480 | 320 |
| （到风景） | 方向改变 | 90 | 480 | 320 |
|----------------+-------------------+------------ -+------------+--------------|
| iPhone 4 | 调整大小 | 90 | 320 | 320 |
| （肖像） | 方向改变 | 0 | 320 | 320 |
|----------------+-------------------+------------ -+------------+--------------|
| 机器人手机| 方向改变 | 90 | 320 | 320 |
| （到风景） | 调整大小 | 90 | 第569话 第569话
|----------------+-------------------+------------ -+------------+--------------|
| 机器人手机| 方向改变 | 0 | 第569话 第569话
| （肖像） | 调整大小 | 0 | 320 | 320 |
|----------------+-------------------+------------ -+------------+--------------|
| 三星银河 | 方向改变 | 0 | 400 | 400 |
| 平板电脑 | 方向改变 | 90 | 400 | 400 |
| （到风景） | 方向改变 | 90 | 400 | 400 |
| | 调整大小 | 90 | 第683话 第683话
| | 方向改变 | 90 | 第683话 第683话
|----------------+-------------------+------------ -+------------+--------------|
| 三星银河 | 方向改变 | 90 | 第683话 第683话
| 平板电脑 | 方向改变 | 0 | 第683话 第683话
| （肖像） | 方向改变 | 0 | 第683话 第683话
| | 调整大小 | 0 | 400 | 400 |
| | 方向改变 | 0 | 400 | 400 |
|----------------+-------------------+------------ -+------------+--------------|

要检测 Android 浏览器上的方向更改，请将侦听器附加到on的orientationchange或resize事件window：

// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
}, false);

检查window.orientation属性以确定设备的方向。使用 Android 手机，screen.width或screen.height随着设备旋转而更新。（iPhone 不是这种情况）。

two-bit-fool 的优秀答案提供了所有背景知识，但让我尝试对如何处理 iOS 和 Android 上的方向更改进行简明、务实的总结：

• 如果您只关心窗口尺寸（典型情况） - 而不是特定方向：
  • resize只处理事件。
  • 在您的处理程序中，仅执行window.innerWidth且window.InnerHeight仅执行操作。
  • 不要使用window.orientation- 它不会在 iOS 上更新。

• 如果您确实关心特定方向：
  • 仅处理resizeAndroid 上的事件，仅orientationchange处理 iOS 上的事件。
  • 在您的处理程序中，对window.orientation(andwindow.innerWidth和window.InnerHeight)采取行动

与记住以前的方向和比较相比，这些方法提供了一些好处：

• 仅维度方法也适用于在可以模拟移动设备的桌面浏览器上进行开发，例如 Chrome 23。（window.orientation在桌面浏览器上不可用）。
• 不需要全局/匿名文件级函数包装级变量。

您可以随时收听窗口调整大小事件。如果在那个事件中，窗口从高比宽变成比高宽（反之亦然），您可以确定手机方向刚刚改变。

在 HTML5 中是可能的。
您可以在这里阅读更多（并尝试现场演示）：http : //slides.html5rocks.com/#slide-orientation。

window.addEventListener('deviceorientation', function(event) {
    var a = event.alpha;
    var b = event.beta;
    var g = event.gamma;
}, false);

它还支持桌面浏览器，但它总是返回相同的值。