How to get the correct window width on orientation change for android devices both tablets and mobiles

Question

I am trying to calculate the window width on orientation change for android devices using jquery function $(window).outerWidth(true);. This calculation gives correct width on orientation change for both iphone and ipad but not in android. If i initially load the page in landscape mode or portrait mode i am getting the correct width but once i change the orientation after loading the page i am getting the width for portrait mode as was in landscape mode and vice versa. Please suggest what is happening and how can i handle this issue so that i get the correct window width on orientation change in android device

There is an issue in Android where it sometimes takes a few seconds for the numbers to change. I'm not famililiar with the platform you are using, but in c++, the solution is to poll repeatedly for a few frames after an orientation change. — CuriousGeorge, Apr 19 '12 at 00:51

score 10 · Accepted Answer · answered Apr 18 '12 at 18:59

10

Why not just use the javascript screen object. you should be able to get the screen dimensions with :

screen.height;
screen.width;

answered Apr 18 '12 at 18:59

slayton

20,123
10
60
89

I am using `$(window).outerWidth(true);` as a general for all devices including desktop because i also need to check the browser resize. If i use the above method then i would need to specifically check for android devices. Still will check your answer but why the jquery function is not giving the correct result. What happens for android devices – user850234 Apr 18 '12 at 19:09
4

I think a more reliable approach may be `screen.availWidth` and `screen.availHeigh` to ignore search bar and browser stuff – neaumusic Mar 03 '16 at 19:28

score 7 · Answer 2 · answered Sep 22 '13 at 07:03

I was also stuck in this problem and find the best solution which will work on all the platforms.Below is the code of 'orientationchange' event.

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

Hope, it will help you and most of other too.. Cheers.

score 1 · Answer 3 · answered Apr 19 '12 at 00:53

1

this post seems to have a solution that may be relevant to you:

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

answered Apr 19 '12 at 00:53

CuriousGeorge

7,120
6
42
74

score 1 · Answer 4 · answered Jan 02 '14 at 06:57

                            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

score 1 · Answer 5 · answered Aug 13 '15 at 05:07

1

Instead of listening to orientationchange event , you can listen to window resize event , it will make sure that window.innerHeight/outerHeight properties got updated.

answered Aug 13 '15 at 05:07

silver1991

1,597
1
9
6

In my case window.innerWidth is not updated after a orientation change triggered resize event – Paul Vincent Beigang May 09 '17 at 11:17
This is incorrect. The size is still wrong when using window.addEventListener('resize' – Martin Turner Jan 23 '21 at 17:33

score 0 · Answer 6 · answered Apr 18 '12 at 19:27

0

Try window.innerWidth, respectively, window.innerHeight; It is posible that android doesn't not about outerWidth and Height;

answered Apr 18 '12 at 19:27

d4rkpr1nc3

1,817
13
16

score 0 · Answer 7 · answered Nov 21 '19 at 15:55

This is ugly, but it works. Mobile viewport height after orientation change

window.addEventListener('orientationchange', () => {
  const tmp = () => {
    this.onResize()
    window.removeEventListener('resize', tmp)
  }
  window.addEventListener('resize', tmp)
})

How to get the correct window width on orientation change for android devices both tablets and mobiles

7 Answers7

Linked