Thoughts on development, design and the world we live in.

orientationchange and resize events on the iPhone

By judy in Uncategorized. Posted on May 8th

Changing the orientation of your mobile device triggers a resize event. Here’s a very simple page showing that both orientationchange and resize events are triggered when you change the orientation of your mobile device. I used the following viewport meta tag in my html because of the iPhone Safari viewport scaling bug:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">

Using this tag prevents the browser from zooming in, and ensures that the user will not have to pinch or zoom to get back to full page view when changing orientation.

I used this javascript to popup an alert whenever an ‘orientationchange’ or ‘resize’ events happen:

I used jQuery’s resize(), and I found the orientationchange event in table 6-1 of Apple’s Safari Web Content Guide on handling events.

So if you visit it on your iPhone, and turn it back and forth, you’ll see alerts on each orientation change saying that ‘orientationchange’ and ‘resize’ events are getting fired.

In my project, I had a div that I wanted to be the full size of the window and it acted as a container for other objects. On window resize the height and width of the div was set to that of the window.

As a result, when I turned the iPhone to landscape, the width of my div got set to 480px. It turns out that if the width of something in your webpage gets set to 480px or more, weird stuff happens:
- If you start in portrait and go to landscape, both resize and orientationevents are triggered.
- Then if you go from landscape back to portrait, an orientationchange event is triggered, but a resize event is not!
- After that, no more orientation changes trigger resize events (though orientationchange events do continue to go off).

Similar problems happen when starting in landscape:
- If you start in landscape and go to portrait, both resize and orientationchange events are triggered.
- Then if you switch from portrait to landscape, only an orientationchange event goes off.

In the end I had to bind the resize of my div to the ‘orientationchange’, not ‘resize’.

By judy | Posted in Uncategorized | Comments (4)


  1. Anthony
    Posted June 19, 2012 at 8:55 am | Permalink

    Hi !

    Thanks for your article.
    I work on iPhone and I have noticed that if I quickly switch from portrait to portrait(other side), or from landscape to landscape, there is no event sent.

    Do you have the same problem ?


  2. Walex
    Posted September 16, 2012 at 10:02 am | Permalink

    I’ve noticed this as well. In addition the resize event doesn’t fire when the URL field disappears, and innerWidth/Height are never updated. I’ve also noticed this isn’t the case with the Ipad which does fire resize events on orientation change. Here’s a quick workaround to get resize to always fire when the orientation changes.

    $(window).bind(‘orientationchange’, function() {
    console.log(‘Orientation Change’);

  3. Scott
    Posted January 9, 2013 at 9:23 am | Permalink

    This was a HUGE help, thank you!

  4. Posted January 31, 2013 at 6:54 pm | Permalink

    Thanks for the article… the information came in very handy!

Post a Comment

Your email is never shared. Required fields are marked *