window.orientation returns different values in iOS and Android

Question

I am testing my Web Application on iPad (Safari browser) and Samsung Tab 2 (Default browser). The window.orientationchange returns different values in both the devices.

$(document).ready(function() {
            window.addEventListener("orientationchange", centerLoginBox);
            window.addEventListener("load", centerLoginBox);
        });

        function centerLoginBox() {
            if (window.orientation == 90 || window.orientation == -90) { //Landscape Mode
                $('#loginbox').css('margin-top', '20%');
                alert(window.orientation);
            }
            else if (window.orientation == 0 || window.orientation == 180) { //Portrait Mode
                $('#loginbox').css('margin-top', '40%');
                alert(window.orientation);
            }

In Tab 2 the alert throws '0' and '180' for landscape mode and the values '90' and '-90' for portrait mode(just the opposite behavior in iPad).

Is this some kind of design difference in iOS and Android? What could be a common solution for this issue?

In my testing iPad, iPhone and Nexus 4 all return the same values: 0 for normal portrait, 90 for anticlockwise landscape, -90 for clockwise landscape and 180 for upside down portrait. — Tamlyn, Oct 14 '14 at 11:40

score 4 · Accepted Answer · answered Dec 26 '12 at 05:49

Ok, this is what I did. I queried for the User Agent information and checked if the device was Android based. If so, change the conditions of window.orientation for both Portrait and Landscape mode.

CODE

function centerLoginBox() {
        var ua = navigator.userAgent.toLowerCase();
        var isAndroid = ua.indexOf("android") > -1; // Detect Android devices
        if (isAndroid) {
            //window.orientation is different for iOS and Android
            if (window.orientation == 0 || window.orientation == 180) { //Landscape Mode
                $('#loginbox').css('margin-top', '20%');
            }
            else if (window.orientation == 90 || window.orientation == -90) { //Portrait Mode
                $('#loginbox').css('margin-top', '40%');
            }
        }
        else {
            if (window.orientation == 90 || window.orientation == -90) { //Landscape Mode
                $('#loginbox').css('margin-top', '20%');
            }
            else if (window.orientation == 0 || window.orientation == 180) { //Portrait Mode
                $('#loginbox').css('margin-top', '40%');
            }
        }
    }

well, it seems now both will be in landscape mode when o=90||-90 — aboutqx, Mar 16 '16 at 09:01
I agree, latest tests I made have shown now iOS and Android are working the same way for window.orientation — pyrsmk, Apr 04 '16 at 14:37
does `window.orientation` still return a different value for android?? — oldboy, Mar 24 '19 at 02:06

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

As mentioned in the second answer in this question you can assign two listeners: one for the orientation change and one for the resize of the screen width/height values. this way you dont have to rely on the values of the rotation because they are inconsistent in different devices.

edited May 23 '17 at 12:07

Community

1
1

answered Dec 24 '12 at 10:48

Androidz

401
1
6
19

1

But the _window.orientation_ values will still differ........and the problem remains the same. – Sayan Dec 24 '12 at 11:15
2

[This](https://notes.matthewgifford.com/a-misconception-about-window-orientation-7231235a94c2) explains some of the details of _window.orientation_ values on different devices. – Chaquotay Jan 20 '16 at 12:37

window.orientation returns different values in iOS and Android

2 Answers2

Linked