Can JavaScript Reliably Detect Android Phone Rotation in a Browser?

Can JavaScript Detect Android Device Rotation in Browser?

Detecting Screen Orientation in Browsers

In Safari on iPhones, screen orientation changes can be detected through the onorientationchange event. However, the question arises: Can Android phones provide similar orientation detection capabilities?

JavaScript and Android Phone Rotation

The behavior of orientation detection across Android devices varies significantly. The resize and orientationChange events may fire in different sequences with inconsistent frequency. Additionally, values like screen.width and window.orientation do not always update as expected.

Reliable Approach for Detecting Rotation

To ensure reliability, it's recommended to subscribe to both resize and orientationChange events. Additionally, a polling mechanism can be implemented to capture missed events:

<code class="javascript">var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // orientation changed, take appropriate actions
    }
};

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

// (optional) Android may fail to fire events on 180 degree rotations
setInterval(checkOrientation, 2000);</code>

Device-Specific Results

Testing on various devices revealed inconsistencies. While iOS devices exhibit consistent behavior, Android devices exhibit variation. The table below summarizes the observed results:

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

Therefore, while detecting Android phone rotation with JavaScript in browsers is possible, the behavior varies across devices and requires a robust approach to ensure reliability.

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