首页  >  文章  >  web前端  >  如何使用 JavaScript 在浏览器中可靠地检测 Android 手机旋转?

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

Barbara Streisand
Barbara Streisand原创
2024-10-30 15:18:59852浏览

How to Reliably Detect Android Phone Rotation in Browsers Using JavaScript?

使用 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn