I'm writing a CSS book

JavaScript archives Compatibility CSS coaching Thidrekssaga QuirksBlog Donations Politics Mobile About COH

sitemapcontact

outerWidth and finding iOS’s orientation

Yesterday James Pearce published important research into the nature and measuring of the mobile browser viewports. One finding is so important that I write this quick entry even though I haven’t yet fully researched it.

The fundamental problem on iOS is that it’s very hard to figure out whether you’re in landscape or portrait mode. You’d say that screen.width changes when you change the orientation, but it doesn’t. iOS always reports a screen size of 320x480 (iPhone) or 768x1024 (iPad), whether the device is in portrait or landscape.

James discovered that window.outerWidth and window.outerHeight do change with orientation. At zoom level 100% the outerWidth is 768 in portrait mode; 1024 in landscape mode. (Measured on my new iPad with iOS 5.0.1 running.)

This behaviour is new in iOS 5, as far as I understand from James’s noted. (It definitely doesn’t work in 3.2, but I don’t have an iOS 4 device so I can’t test those.)

However. If you zoom in, the two variables take on larger and larger values. Right now I suspect that they measure the width of the layout viewport in device pixels (and no, that doesn’t make sense). I have to do some more research to make sure, though, and I don’t have the time right now.

So the rule is: don’t read out the actual values of window.outerWidth and window.outerHeight, just see which one is larger. If it’s outerWidth you’re in landscape mode, if it’s outerHeight you’re in portrait mode.

Of course you could also use the orientation media query or the window.orientation property. Still, having an extra property pair never hurts.