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.
Also see this post for the full research.
Try the example here. This simple test contains a test page with
width=device-width, one with
initial-scale=1, and one with both declarations.
I was wrong in one respect: combining
width=device-width,initial-scale=1 does work. On the iPhone the layout viewport is 320px in portrait mode and 480px in landscape. (iPad: 768px and 1024px.) So it is possible to combine these two values, and the people and projects that did that were right and don’t have to change anything.
I made a mistake because one of my test cases had
initial-scale=2 instead of 1. I thought it would matter little beyond the initial zoom, but it does matter. A lot. As soon as you use an initial scale of 2 all kinds of strange things start happening, and tbe mysterious value of 268px (iPhone portrait) creeps up as a minimum zoom level. That value does not make any sense whatsoever.
I’m not sure what’s happening with initial scales other than 1, I’m not even sure if the iPhone’s behaviour is a feature or a bug. If it’s a feature I sure don’t understand it.
The only thing I know for sure is that setting
initial-scale to any value changes the layout viewport dimensions, which is odd in itself, and which also doesn’t follow an easy-to-see rule.
Although W3C seems to get what’s going on its utterances are so rarified that I do not understand them. A translation to a human language would be greatly appreciated.
More news later, when I’ve done lots and lots of tests.
If you like this blog, why not donate a little bit of money to help me pay my bills?