JavaScript 可以在浏览器中可靠地检测 Android 手机旋转吗？

JavaScript 可以检测浏览器中的 Android 设备旋转吗？

检测浏览器中的屏幕方向

在 iPhone 上的 Safari 中，屏幕可以通过 onorientationchange 事件检测方向变化。然而，问题出现了：Android 手机能否提供类似的方向检测功能？

JavaScript 和 Android 手机旋转

不同 Android 设备的方向检测行为差异很大。 resize 和orientationChange 事件可能以不同的顺序触发且频率不一致。此外，像 screen.width 和 window.orientation 这样的值并不总是按预期更新。

检测旋转的可靠方法

为了确保可靠性，建议订阅resize 和orientationChange 事件。此外，还可以实现轮询机制来捕获错过的事件：

<code class="javascript">var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // orientation changed, take appropriate actions
    }
};

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

// (optional) Android may fail to fire events on 180 degree rotations
setInterval(checkOrientation, 2000);</code>

特定于设备的结果

在各种设备上进行的测试显示出不一致的情况。虽然 iOS 设备表现出一致的行为，但 Android 设备却表现出变化。下表总结了观察到的结果：

Device	Events Fired	Orientation	innerWidth	screen.width
iPad 2 (landscape to portrait)	resize, orientationchange	0, 90	1024, 768	768, 768
iPad 2 (portrait to landscape)	resize, orientationchange	90, 0	768, 1024	768, 768
iPhone 4 (landscape to portrait)	resize, orientationchange	0, 90	480, 320	320, 320
iPhone 4 (portrait to landscape)	resize, orientationchange	90, 0	320, 480	320, 320
Droid phone (portrait to landscape)	orientationchange, resize	90, 90	320, 569	320, 569
Droid phone (landscape to portrait)	orientationchange, resize	0, 0	569, 320	569, 320
Samsung Galaxy Tablet (landscape to portrait)	orientationchange, orientationchange, orientationchange, resize, orientationchange	0, 90, 90, 90, 90	400, 400, 400, 683, 683
Samsung Galaxy Tablet (portrait to landscape)	orientationchange, orientationchange, orientationchange, resize, orientationchange	90, 90, 0, 90, 90	683, 683, 683, 400, 400

因此，虽然可以在浏览器中使用 JavaScript 检测 Android 手机旋转，但不同设备的行为有所不同，需要采用稳健的方法来确保可靠性。

以上是JavaScript 可以在浏览器中可靠地检测 Android 手机旋转吗？的详细内容。更多信息请关注PHP中文网其他相关文章！