One common problem on iOS is that, when you use a meta viewport tag with
width=device-width, the page doesn’t react to an orientation change. On the iPhone the page becomes 320px wide and on the iPad 768px, regardless of whether you’re in portrait or in landscape mode. Sometimes this is annoying.
Today I found a solution: use
instead of . Although I’m not the first one to discover this (see, for instance, this article in French) it doesn’t seem that this solution is well-known.
See this post for an update, and this post for the full research.
So here you go.
Note: do not use
width=device-width, or iOS will revert back to its usual behaviour.
<meta name="viewport" content="initial-scale=1">
This works fine on iOS. A portrait-held iPhone has a width of 320px, while in landscape it has a 480px width. For the iPad the numbers are 768px and 1024px.
What about the other browsers? Do they display unwanted side effects if we go over to initial-scale?
I tested a few, and it seems this trick holds up on all of them but IE10 on Nokia Lumia. The other browsers do not copy iOS’s behaviour: the meta viewport width is different in portrait and landscape mode. Still, using
initial-scale is perfectly safe: the browser does exactly the same as for
Tested in: Android WebKit 4.x on HTC One X and Samsung Galaxy S3, Chrome 29 on HTC One X, Chrome 18 on Galaxy S4, Android WebKit 2.x on Samsung Galaxy Pocket and LG Optimus something, Opera Mobile 12 and 15, BlackBerry 10, and Firefox 23 Android and Firefox OS 1.0.1. It also works on Tizen, with the caveat that my device does not support landscape mode at all.
IE10, unfortunately, does not follow the rest. Although it treats
width=device-width correctly (320px portrait, 480px landscape), with
initial-scale=1 it gives a 320px width in both orientations.
I’m afraid that this is too bad for IE10. Safari iOS is much more important to web developers than IE10, so the choice is clear.
From a theoretical perspective this is completely fucking batshit insane, as are most of the meta viewport values except for
width=device-width. Setting an initial scale is all well and good, but why would that change the dimensions of the layout viewport?
It does, though —
in fact, right now it appears to me that all scaling values of the meta viewport are relative to the dimensions the page would have if you’d used That last conclusion is probably not true. It's more complicated.
width=device-width — even if you use
width=745 or some other random value.
More research coming up, but this trick is too important to postpone until later.
If you like this blog, why not donate a little bit of money to help me pay my bills?