Just now I released my preliminary meta viewport research that studies the various permutations of the
<meta name="viewport"> tag.
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.
Before presenting the results, some browser notes. I tested in a healthy mix of rendering engines and device sizes, just to get a feel of the lay of the land and things to watch out for. This, I think, succeeded.
Android WebKit and IE have rather terrible bugs in their meta viewport implementation, so it’s safest to assume that anything I say below does not go for these two browsers.
Safari has annoying bugs where it uses the portrait size of several properties also in landscape mode. This is well-known, but I found that I got fed up with its behaviour during this research.
Chrome, Opera Presto, and BlackBerry support the meta viewport well, though each of them has tiny bugs here and there.
Firefox is untested because it still does not give the dimensions of the visual viewport in
window.innerWidth/Height. Therefore I cannot read out the zoom factor, and about half of the tests are useless.
Ages ago I introduced the visual viewport and the layout viewport. The layout viewport is the one relative to which CSS declarations such as
width: 20% are resolved, and you have several options of setting its width. The visual viewport is the one that matches the current zoom level; in other words, the area that the user currently sees on his device screen.
It turns out there’s a third viewport, which I call the ideal viewport. It has the ideal size for displaying web pages on the device. So for an iPhone up to 4S it’s 320x480, for an iPad it’s 768x1024 etc.
As you might have guessed, it’s this viewport that you invoke when you use
width=device-width. As you may not have guessed, you also invoke it when using
maximum-scale all give zooming factor relative to the ideal viewport. So on an iPhone 4S portrait, specifying
initial-scale=2 gives a visual viewport width of 160px (320 / 2).
Also, this directive sets the width of the layout viewport to 160px. Weird, eh? Not what one would expect when setting a zoom factor.
So essentially the
initial-scale directive also allows you to set the layout viewport width, just as the
width directive does.
Things get interesting when you combine the two:
<meta name="viewport" content="width=400,initial-scale=1">
width=400 tells the browser to set the layout viewport width to 400px.
initial-scale=1 tells it to set the width to the ideal viewport width. What is an honest browser to do?
It turns out that they use the largest width; calculated independently for portrait and landscape. So on an iPhone 4S this meta viewport gives a 400px layout viewport in portrait (largest of 320 and 400), and a 480px one in landscape (largest of 480 and 400).
This essentially means that there is a min-width for the layout viewport. The layout viewport is always at least 400px wide, but the browser may stretch it up if that’s fitting for the device and orientation.
I’m not sure if there’s a practical implementation for this min-width, and it certainly does not work in Android WebKit, but it’s interesting all the same.
These were the main conclusions of my research. There’s plenty more detail on the main page, so I suggest you head over there for more.
If you like this blog, why not donate a little bit of money to help me pay my bills?