Question

70

window.orientation returns different values in iOS and Android

rated 0 times [ 77] [ 7] / answers: 1 / hits: 16705 / 12 Years ago, mon, december 24, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jennie

Add To Favorites

Follow

Total Points: 593

Total Questions: 102

Total Answers: 106

Location: Federated States of Micronesia

Member since Fri, Sep 16, 2022

2 Years ago

jennie questions

1 Is there a React equivalent of Vue's nextTick() function?

Tue, Jun 21, 22, 00:00, 2 Years ago

1 how to loop to expect a list of item in jest

Tue, Feb 8, 22, 00:00, 2 Years ago

1 arrow function expected no return value with clean-up function in useEffect

Sun, May 23, 21, 00:00, 3 Years ago

1 React Re-Render Causes Flickering : How can i fix this?

Thu, Mar 4, 21, 00:00, 3 Years ago

1 React onChange not working for input inside functional component

Thu, Feb 25, 21, 00:00, 3 Years ago

View All

answered 12 Years ago hasanb · Accepted Answer

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

            }

        }

    }