I'm writing a CSS book

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

contact

initial-scale=1 makes Safari iOS react to orientation change

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 initial-scale=1 instead of width=device-width. 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 width=device-width.

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 width=device-width — even if you use width=745 or some other random value. That last conclusion is probably not true. It's more complicated.

More research coming up, but this trick is too important to postpone until later.