@viewport

I tested the pure variant and the -ms-, -o-, and -webkit- prefixes. The only one to actually work is @-o-viewport in Opera/Presto.

The @-webkit-viewport, despite apparently landing, is not supported by any of my test browsers. (Not even by Opera/Blink? No.) Fair enough; nobody ever claimed it did.

@-ms-viewport is supposed to work in IE, but it’s a goddamn disaster area, as the entire viewport is. For once I don’t have to do my own research here, since Tim Kadlec already did. Read his conclusions. Also, it turns out the exact quantity of @-ms-viewport shit depends on the minor version.

Fuck it. If Microsoft can’t get its act together we won’t solve IE bugs. So do not use @viewport. It does not work. (However, an update may be coming. I wonder if it'll solve all viewport issues.)

height

Then we come to height in a regular meta viewport tag. It’s supposed to be the equivalent of width, but only in the other dimension.

So if I did this I’d expect the layout viewport height to be set to 400px, and its width to be calculated from that. (If the page is higher than 400px, content would flow out of the layout viewport. That’s normal.)

<meta name="viewport" content="height=400">

This, now, does not work. Except in IE, which has its own slant on things and definitely does it wrong.

Ranty-rant

When Apple and
MDN, or anyone else for that matter, show the height directive in a meta viewport table of stuff that works, they lie because they’re too lazy to actually test stuff.

I’m not surprised by Apple lying. I remember the days when browser documentation pages were artistic works of high fantasy, and did not correspond with actual reality at all. Although the situation improved a lot over the past 10 years, there is still some residual bullshit to be removed. This is one of those cases.

But there are countless resources uncritically copying stuff and not bothering to test anything. I have a gripe with that. I dislike it, so I rant about it. This was the reason I set up QuirksMode.org all those years ago, and apparently it’s still necessary. People copy other people. They don’t bother to test.

If I don’t test it, nobody else will.

Thanks for listening. I feel much better now.

device-height

Finally, there is a device-height value that does work, more or less. Consider this code:

<meta name="viewport" content="width=device-height">

What I would expect to happen is the browser taking the width of the ideal viewport in the other orientation and applying that as width in the current one. So on an older iPhone, in portrait mode the page would be 480px wide, and in landscape 320px.

The only browser to actually do so is BlackBerry. The rest does odd things:

Chrome and Opera Presto try to do the right thing, but use not the height, but the available height, minus toolbars and such. This sort-of-kind-of makes sense, since they do the same when reading out screen.width/height, which is supposed to give the dimensions of the ideal viewport. Still, officially it’s a bug.