如何使用 JavaScript 在浏览器中可靠地检测 Android 手机旋转？

使用 JavaScript 检测浏览器中 Android 手机旋转

在 iOS 浏览器中，开发者可以使用 onorientationchange 事件并查询 window.orientation 来检测屏幕旋转对于角度。 Android 智能手机上可以实现类似的功能吗？

Android 上的浏览​​器行为

与 iOS 不同，Android 上屏幕旋转事件的行为因设备而异。 resize 和orientationChange 事件可能会以不同的顺序和频率触发。此外，诸如 screen.width 和 window.orientation 之类的值可能表现不一致。仅仅依赖 screen.width 是特别不可靠的，因为它在 iOS 中旋转时不会改变。

可靠的方法

要解决这些不一致问题，建议听resize 和orientationChange 事件，以及间歇性轮询。这可以确保即使在事件不一致触发的情况下也能捕获有效的方向值。

var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // Handle orientation change
    }
};

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

// Polling as a safety catch for 180-degree rotations
setInterval(checkOrientation, 2000);

测试结果

在各种 Android 设备上进行的测试显示出显着的差异：

Device	Events Fired	Orientation	InnerWidth	Screen.width
iPad 2 (Landscape)	Resize OrientationChange	90	1024	768
iPad 2 (Portrait)	Resize OrientationChange	0	768	768
iPhone 4 (Landscape)	Resize OrientationChange	90	480	320
iPhone 4 (Portrait)	Resize OrientationChange	0	320	320
Droid Phone (Landscape)	OrientationChange Resize	90	320	320
Droid Phone (Portrait)	OrientationChange Resize	0	569	569
Samsung Galaxy Tablet (Landscape)	OrientationChange OrientationChange OrientationChange Resize	90	400	400
Samsung Galaxy Tablet (Portrait)	OrientationChange OrientationChange OrientationChange Resize	0	683	683

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