Preliminary meta viewport research

It’s preliminary because I tested it in only eight browsers instead of the customary 40, I did not yet test the @viewport CSS rule, and I’ll probably need some extra tests to cover edge cases. Still, I now have a pretty good overview of where we stand with regard to the meta viewport.

More about scaling in iOS

Turns out Tuesday’s post was not so much wrong as incomplete. I was tripped up by what’s probably the most complicated feature (or bug) in the meta viewport space, and my conclusions weren’t entirely correct.

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=1instead ofwidth=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.