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.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.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.
I’m speaking at the following conferences: