javascript - Resize HTML elements on Android orientation change - Stack Overflow

admin管理员组

文章数量:1302904

I am trying to bind an event in Javascript to either the orientationchange or resize events in Android in order to change the width/height of some elements for my web app. In the event, I use window.innerHeight and window.innerWidth to get the current height and width of the window.

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

I am trying to bind an event in Javascript to either the orientationchange or resize events in Android in order to change the width/height of some elements for my web app. In the event, I use window.innerHeight and window.innerWidth to get the current height and width of the window.

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

• javascript
• android

Share Improve this question Follow asked Jan 13, 2011 at 22:47 Dan D.Dan D. 1,12511 gold badge1212 silver badges1818 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

I have fixed the problem. It turns out that the resize event works correctly, but the orientationchange event does not. I was testing to see if the orientationevent was present, and then binding to that if possible. I have changed my code over to only use the resize event, and have achieved the desired effect.

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

My investigation showed that this Android webview bug ("orientationchange" fires 20-150ms before changing the window.innerHeight Javascript value) exists when you modify the default user agent of the web view. Don't ask me how one is related to another, though.

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

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

webView.getSettings().setUserAgentString("custom-user-agent");

2) use "resize" event instead of "orientationchange" event

There are CSS selectors for this:

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

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

I can confirm that "orientationchange" -event does not work as expected in android 2.2 and 2.3. It says it present when you check for availability but then does not fire. It works in Android 1.6 and 2.1 though. I ended up, just like you, using "resize" -event for all Android versions.

Take a look at the question and answers for Detect rotation of Android phone in the browser with JavaScript . It covers a cross platform to detect changes in orientation.
For getting the size of the viewport and/or window cross platform, take a look at http://responsejs./ or http://verge.airve./.

本文标签： javascriptResize HTML elements on Android orientation changeStack Overflow