FOLLOW US
orientationchange and resize events on the iPhone
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:
|
1 2 3 4 5 6 7 8 9 10 |
<code>
$(document).ready(function(){
$(window).bind('resize', function() {
alert('resize event triggered!');
});
$(window).bind('orientationchange', function() {
alert('orientationchange event triggered!');
});
});
</code> |
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’.
4 Comments
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 ?
Thanks
Anthony
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’);
$(window).resize();
});
This was a HUGE help, thank you!
Thanks for the article… the information came in very handy!