window.orientation returns different values in iOS and Android

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

  • Check Landscape/Portrait orientation in an iMessage app (extension)
  • Rotating image by 3*Double.pi/2 makes image not appear (swift3)
  • how to change a view from portrait mode to landscape mode and lock it?
  • How can I set the UIImagePickerController orientation for video?
  • How Do I detect the orientation of the device on iOS?
  • Properly preventing orientation change in Flex Mobile app
  • Is this some kind of design difference in iOS and Android? What could be a common solution for this issue?

    2 Solutions Collect From Internet About “window.orientation returns different values in iOS and Android”

    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%');
                }
            }
        }
    

    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.