How to get the correct window width when changing the orientation for Android devices on both tablets and mobile phones

Question

I am trying to calculate window width when changing orientation for Android devices using jquery function $(window).outerWidth(true);. This calculation gives the correct width when changing the orientation for iphoneand ipad, but not for android. If I initially load the page in landscape mode or portrait mode, I get the correct width, but as soon as I change the orientation after loading the page, I get the width for portrait mode, as it was in landscape mode, and vice versa. Please suggest what is happening, and how can I deal with this problem in order to get the correct window width when changing orientation on an Android device.

Answer 1

Why not just use a javascript object screen. You should be able to get screen sizes using:

screen.height;
screen.width;

Answer 2

I was also stuck with this problem and found the best solution that will work on all platforms. The following is the changechange event code.

function onOrientationChange(event)
{
    setTimeout(function(){
       'Enter you code here';
    },200);
}

Hope this helps you and most others ... Greetings.

Answer 3

, , , :

http://forum.jquery.com/topic/orientationchange-event-returns-wrong-values-on-android

Answer 4

Instead of listening to the orientationchange event, you can listen to the resize event in the window to make sure the window.innerHeight / outerHeight properties are updated.

Answer 5

Try window.innerWidth, respectively window.innerHeight,; It is possible that the android is not related to outerWidth and Height;

Answer 6

                            var isMobile = {
                                Android: function () {
                                    return navigator.userAgent.match(/Android/i);
                                },
                                BlackBerry: function () {
                                    return navigator.userAgent.match(/BlackBerry/i);
                                },
                                iOS: function () {
                                    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
                                },
                                Opera: function () {
                                    return navigator.userAgent.match(/Opera Mini/i);
                                },
                                Windows: function () {
                                    return navigator.userAgent.match(/IEMobile/i);
                                },
                                webOS: function () {
                                    return navigator.userAgent.match(/webOS/i);
                                },
                                any: function () {
                                    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
                                }
                            };


                            var tell_if_mobile;
                            var mobile_tablet;
                            if (isMobile.any()) {
                                tell_if_mobile = true;
                            } else {
                                tell_if_mobile = false;
                                var windowWidth = window.screen.width < window.outerWidth ?
                                                  window.screen.width : window.outerWidth;
                                tell_if_mobile = windowWidth < 800;
                                mobile_tablet = windowWidth >= 500 ? "Tablet/Phablet Device" : "Desktop View (Mobile)";
                            }

                            var mobile_type;
                            mobile_type = isMobile.Android() ? "Android Device" :
                                          isMobile.BlackBerry() ? "Blackberry Device" :
                                          isMobile.iOS() ? "iOS Device" :
                                          isMobile.Opera() ? "Opera Mobile/Mini" :
                                          isMobile.Windows() ? "IEMobile" :
                                          isMobile.webOS() ? "webOS device" :
                                          tell_if_mobile == true ? mobile_tablet :
                                          "Not a mobile device";
alert(mobile_type); //result