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.

This is the blog of Peter-Paul Koch, web developer, consultant, and trainer. You can also follow him on Twitter or Mastodon.
Atom RSS

If you like this blog, why not donate a little bit of money to help me pay my bills?