Home  >  Article  >  Web Front-end  >  How to Reliably Detect Android Phone Rotation in Browsers Using JavaScript?

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

Barbara Streisand
Barbara StreisandOriginal
2024-10-30 15:18:59852browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn