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?
Categories:
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.