Resize HTML elements when changing the orientation of Android

Question

I am trying to associate an event in Javascript with either orientation changes or resizing in Android to change the width / height of some elements for my web application. In this case, I use window.innerHeight and window.innerWidth to get the current height and width of the window.

This works fine on iOS and desktop devices, but on Android it seems to trigger this event before changing values ​​in a window variable. Therefore, when someone switches from portrait to landscape, I still get the values ​​for the portrait and therefore I can’t resize correctly. Does anyone know what the problem is and how can I fix it?

Answer 1

I fixed the problem. It turns out that the resize event works correctly, but the changechange event does not. I tested to see if a pointer is present, and, if possible, to attach to it. I changed my code to use the resize event and achieved the desired effect.

I'm not sure if this is unique to my code or not, but this fixed it for me.

Answer 2

My investigation showed that this Android web browser error ("changechange" fires 20-150 ms before changing the window.innerHeight Javascript value) exists when the default user agent of the web view is changed. Do not ask me how this relates to another.

But to solve your problem, you can do one of the following:

1) get rid of the following useragent modification from your code

webView.getSettings () setUserAgentString ("user agent order") ;.

2) use the "resize" event instead of the "changechange" event

Answer 3

There is a CSS selector for this:

/*normal styles here */ #wrap { width:1024px; } @media only screen and (orientation:portrait){ /* portrait styles here */ #wrap { width:768px; } } 

Source: http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes

Answer 4

I can confirm that the "changechange" -event does not work properly in Android 2.2 and 2.3. He says that he is present when you check for availability, but then does not work. However, it works in Android 1.6 and 2.1. I ended up just like you, using the "resize" -event for all versions of Android.

Answer 5

Take a look at the question and answer on Detecting Android Phone Rotation in a Browser Using JavaScript . It covers a cross platform for detecting orientation changes.
To get the size of the viewport and / or cross platform, see http://responsejs.com/ or http://verge.airve.com/ .