QuirksBlog - Viewport
Last week I got annoyed at the large differences in syntax for vendor-prefixed device-pixel-ratio media queries. I said, half in desperation and half as a threat, that it might be better to have only the WebKit rendering engine and ditch the rest.
Meanwhile I’ve had some time to think about it, and I find that I still support the idea of multiple rendering engines. Competition is still good, just as it was ten years ago.
HOWEVER. There’s an important exception.
OK, I’m now officially fed up with vendor prefixes, and to a lesser extent with Firefox and Opera who’ve gone batshit crazy on us all once more.
It occurs to me that my recent post about
devicePixelRatio was a bit cryptic and short. So I will givde some extra examples in this post. Also, I did some additional research that takes
screen.width into account.
Remember the definition:
devicePixelRatio is the ratio between physical pixels and device-independent pixels (dips) on the device.
devicePixelRatio = physical pixels / dips
I did some research around the
window.devicePixelRatio property that all WebKit browsers, as well as Opera, support, and for once the news is good. This property’s definition makes sense, and it is implemented almost universally.
Yesterday I finally researched
window.outerWidth/Height in the mobile browsers, and here are my conclusions.
A few months back James Pearce published research that shows that the use of
window.outerWidth on iOS devices allows you to read out the true orientation; something that
screen.width does not.
Yesterday I came to the conclusion that this is far and away the most interesting use
window.outerWidth has, and that James also missed a completely idiotic effect that Apple provides. The rest of the browsers are much more boring in their implementation.
Now that iOS, Android, and BlackBerry all have a new implementation of
position: fixed let’s see what changed since the last time we looked.
Because it’s fairly hard to describe what mobile and tablet browsers do to
position: fixed I decided to make four short videos, both to help you understand the issues better, and to practice a bit with shooting videos of mobile browsers.
Last week I did some research on the resize event on mobile and tablet browsers. Executive summary: it’s a mess. And the best browser, surprisingly, is Samsung’s Dolfin.
My conclusions are, summarised:
Yesterday James Pearce published important research into the nature and measuring of the mobile browser viewports. One finding is so important that I write this quick entry even though I haven’t yet fully researched it.
On a hint from Vasilis I did some quick research into dynamically changing the meta viewport tag. Turns out that this works in nearly all browsers that support it in the first place, with the exception of Firefox. This entry gives the details and explains why you should care. See also the inevitable compatibility table.
Web developers are quite annoyed that
position: fixed doesn’t work on mobile browsers, but mobile browser vendors cannot afford to support it. This dilemma is unsolvable by the means we presently have at our disposal.
To offer a way out, I’m proposing to create a new
position: device-fixed declaration better suited to the mobile scenario with its tiny screen and its zoom. The zoom aspect, in particular, is completely ignored by the spec, and so far mobile browsers haven’t found a good solution, either.
With a new value, fixed positioning could be split into a desktop and a mobile variant, and browsers could decide which one to support. That would allow web developers to devise separate solutions for desktop and mobile.
As we all know, media queries are by far the best way to distinguish between desktop and mobile browsers, or, more generically, between the dozens of different screen sizes our users can have. Media queries are the future of the web.
Nonetheless, the fact that they are the future doesn’t mean that there are no problems. One is particularly tricky: what do we do for browsers that don’t support them?
If you want to make your websites ready form mobile, it’s best to combine
<meta name="viewport" content="width=device-width"> with
width media queries. That will give your site the optimal width (as determined by the device vendor, who really ought to know), and your site will look the better for it.
Lanyrd, Simon and Natalie’s latest brainchild, uses exactly this technique, and it establishes the perfect mobile browsing baseline. Try it on as many mobile browsers as you can, and you’ll see. No frills, just a simple user experience that just works.
In order to understand why we should use exactly this combination we should briefly repeat what meta viewports and media queries are all about.
On Tuesday Jason Grigsby challenged the conventional view that media queries are all we need to make a website mobile-friendly. Although he’s right when he points out some serious problems, I do not think that media queries are the “fool’s gold,” as Jason says. The message seems to be more that media queries alone are not enough to make your sites mobile-friendly. An additional component is required.
About a month ago I release part one of my series “A tale of two viewports,” where I discuss the widths and heights of the viewport, the
<html> element, and related issues on desktop browsers. Today I release part two, which deals with the mobile browsers. And of course there’s the inevitable compatibility table.
Back in November I started complicated research into measuring the widths and heights of various
interesting elements in mobile browsers. This research kept me occupied for months and months; and frankly I became
a bit afraid of it because the subject is so complicated.
Besides, when I re-did some tests in March
I pretty quickly figured out I’d made some nasty mistakes in my original tests. Back to the
However, after a review round by some browser vendors and some rewriting it’s done now.
Today I present
A tale of two viewports — part one.
and the media queries
This piece is about the desktop browsers, because the mobile story is much easier to follow if you know
exactly what happens on desktop. Later on I’ll publish part two, which is exclusively about
Right now Jason Grigsby’s excellent summary of the orientation media query is making the round of blogs and tweets, and that’s well deserved. Media queries will become extremely important in the near future, when we have to build websites that work on any device resolution from 300px to 1280px or more.
Still, there’s one tiny nitpick I’d like to make, so that you fully understand when to use
orientation and when to use