Can JavaScript Detect Android Phone Rotation in Browsers?

Javascript-Based Detection of Android Phone Rotation in Browsers

In Apple-developed Safari browsers, monitoring changes in screen orientation is possible through observing the orientationChange event and evaluating window.orientation. However, can such functionality be implemented in browsers running on Android devices?

The response to this is nuance. Javascript execution on standard web pages can indeed detect screen rotation in Android devices. However, the behavior varies across devices and browsers.

Challenges and Recommended Approach

The primary challenge lies in the inconsistent event firing behavior across Android devices. The resize and orientationChange events may fire asynchronously with varying frequencies. To add to this complexity, values like screen.width and window.orientation may not always provide predictable results. Therefore, relying solely on screen.width is not recommended as it remains unaltered during iOS rotations.

The most dependable approach involves simultaneously listening for both resize and orientationChange events. Supplementing this with periodic polling using the setInterval function enhances reliability, ensuring a valid orientation value.

<code class="javascript">var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // Perform operations in response to orientation change
    }
};

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

// Android occasionally fails to trigger events for 180-degree rotations
setInterval(checkOrientation, 2000);</code>

Device-Specific Results

Here's a summary of observed behaviors across various tested devices:

Device	Event Sequence	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, orientationchange	90	400	400
Samsung Galaxy Tablet (Portrait)	orientationchange, orientationchange, orientationchange, resize, orientationchange	0	683	683

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