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.

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

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:

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.