I'm writing a CSS book

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

contact

Viewport research addendum: height and @viewport

Here’s an update to my recent viewport research about the height directive and the @viewport alternative syntax.

Summary: height doesn’t work. @viewport works only on Opera Presto, with the proper vendor prefix, which basically amounts to “doesn’t work.”

My test notes are at the bottom of this page. You can also find links to the test cases there.

@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.

Worst is, you actually need it in order to combat an IE Snap Mode bug. Wonderful. Brilliant.

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:

• Safari always applies the landscape width, regardless of orientation. This sort-of-kind-of makes sense, since device-width always means the portrait width. Still, officially it’s a bug.
• 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.
• Android WebKit and IE pretend the code really says width=device-width. Whatever.

So don’t use device-height, either. To be honest, even if it worked perfectly I wouldn’t see a reason to use it.

Which begs the question why Apple invented nonsense items in the first place. And then didn’t bother to support some of them. And was then uncritically copied by countless ...

Hold it there. I already said that.

Time to do something else.