How can I Reliably Detect Device Rotation in a Browser on Android with JavaScript?

Detect Device Rotation in Browser on Android with JavaScript

Compatibility Challenges in Detecting Rotation

Detecting device rotation using JavaScript in the browser can be more challenging on Android phones compared to iPhones, which have a well-defined approach. The behavior across Android devices can be inconsistent, with variations in the sequence and frequency of events and changes in values like screen.width and window.orientation.

Reliable Approach for Rotation Detection

To address these inconsistencies, it's recommended to listen to both the resize and orientationChange events and implement polling as a safety measure. This approach ensures that you will eventually receive a valid orientation value.

<code class="js">var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // Handle orientation change as needed
    }
};

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

// (Optional) Poll for orientation changes on Android (180 degree turns)
setInterval(checkOrientation, 2000);</code>

Event Sequences and Value Changes

The sequence of events and the changes in values vary across devices. Here is a table summarizing the results from various devices:

Device	Events Fired (to Landscape)	orientation	innerWidth	screen.width
iPad 2	resize, orientationchange	90	1024	768
iPhone 4	resize, orientationchange	90	480	320
Droid phone	orientationchange, resize	90	320	569
Samsung Galaxy Tablet	orientationchange, orientationchange, orientationchange, resize, orientationchange	90, 90, 90	400	683

Additional Considerations

While this approach provides a reliable way to detect device rotation, it's important to keep in mind the limitations of JavaScript in this context. For example, certain values like screen.width may not always change as expected. It is also recommended to avoid relying solely on screen.width due to its inconsistent behavior across iOS devices.

The above is the detailed content of How can I Reliably Detect Device Rotation in a Browser on Android with JavaScript?. For more information, please follow other related articles on the PHP Chinese website!