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

Detecting Android Phone Rotation in Browsers with JavaScript

In iOS browsers, developers can detect screen rotation using the onorientationchange event and querying window.orientation for the angle. Can similar functionality be achieved on Android smartphones?

Browser Behavior on Android

Unlike iOS, the behavior of screen rotation events on Android varies across devices. The resize and orientationChange events may fire in different sequences and frequencies. Additionally, values like screen.width and window.orientation can behave inconsistently. Relying solely on screen.width is particularly unreliable as it doesn't change when rotating in iOS.

Reliable Approach

To address these inconsistencies, it's recommended to listen to both resize and orientationChange events, combined with intermittent polling. This ensures capturing valid orientation values even in scenarios where events don't fire consistently.

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);

Testing Results

Testing on various Android devices revealed significant variations:

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

The above is the detailed content of How to Reliably Detect Android Phone Rotation in Browsers Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!