The orientation media query

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 device-width.

orientation is supported by Android 2, Bolt, MicroB, and Firefox. And now, apparently, by the iPad. The iPhone does not support it, and we’ll see in a moment why that is unfortunate. Add this to my OS 4 wish list.

device-width vs. orientation

I’ve often discussed media queries with Vodafone in Düsseldorf, and in the end the consensus was that orientation is relatively useless, and that we should use device-width instead.

First of all, device-width is vastly better supported. Both Operas, all mobile WebKits, as well as Firefox and MicroB support this media query.

Secondly, device-width tells you what you need to know, while orientation doesn’t. The question is not whether a device is in portrait or landscape orientation, but how much space the screen has available.

That’s exactly what device-width tells you. It uses the formal screen resolution (available in JavaScript as screen.width/height), and allows you to tap into that information for your style sheets.

Now you’re certain that your styles are applied only when the screen is 400px wide or less. Whether the device is in portrait or landscape mode does not matter. In fact, it could confuse the issue, because some cheap phones could have a landscape width of less than 400px, while some advanced ones have a portrait width of more than 400px.

There’s no way you can figure that out with only orientation. It doesn’t tell you anything about the screen resolution, only about how the user is currently holding the device. That might be interesting in certain cases, but not when you’re building your basic CSS layout.

So as a general rule you should ignore orientation and use device-width instead.

iPhone OS

However, there’s a problem on iPhone OS. There the device width is always 320px (iPhone) or, I assume, 768px for the iPad. (Can someone with an iPad please confirm that last figure on this test page?)

This device width stays the same when you switch to landscape mode. It is not updated to reflect the wider screen you now have available. (Neither is screen.width/height, by the way.)

This is likely a deliberate decision by Apple, and not a bug. Keeping the formal device width the same means that web pages (and apps) do not change their layout when the user rotates the device.

Still, it’s annoying. Accurate information about the device, screen, web page, zooming level, and scrolling offset will become vital as we create more and more mobile web pages. (In the coming months I’m going to be absolutely fascist on this point. Browser vendors, you have been warned.)

So the iPhone withholds crucial information that web developers need. Therefore I count this behaviour as a bug, despite the fact that it’s probably deliberate.

Anyway, because of this state of affairs the orientation media query is important on iPhone OS, or you won’t be able to tell that the user has changed orientation. That’s why it’s a pity that the iPhone doesn’t support it, and that it’s good news the iPad does.

Right now I’m not totally certain how you should combine the two on iPhone OS and only on iPhone OS. I’ll think about it a bit more, or maybe a reader will come up with a good way.

Comments

1 Posted by jack on 9 April 2010 | Permalink

Test on iPad: width is always 768px, consistent with iPhone behavior.

2 Posted by Tobias von Klipstein on 9 April 2010 | Permalink

What about those css media queries? Are they supported by a wide range of browsers?

1. min-aspect-ratio:1/1 (Is the screen-size landscape?)
2. max-aspect-ratio:1/1 (Is the screen-size portrait?)
3. min-device-aspect-ratio:1/1 (Is the device currently in landscape mode?)
4. max-device-aspect-ratio:1/1 (Is the device currently in portrait mode?)

Maybe they help in some cases.

3 Posted by Craig Saila on 9 April 2010 | Permalink

If you're looking to find the device's supported width (as opposed to just the orientation) using the @media queries for min-width/max-width in combination with the meta viewport element (http://www.w3.org/TR/mwabp/#bp-viewport) works like a charm and gets closer to the intent.

For example:
iPhone landscape:
@media (max-width:480px) {
body { background: green; }
}

iPhone portrait:
@media (max-width:320px) {
body { background: red; }
}

4 Posted by Rick Fletcher on 9 April 2010 | Permalink

"The iPhone does not support it, and we’ll see in a moment why that is unfortunate. Add this to my OS 4 wish list."

FYI, support for orientation was added in iPhone OS 3.2, which is what ships on the iPad. iPhones are still at 3.1.x. It's not clear if the iPhone will have a 3.2 update before it gets to 4.0 this summer, but it will have orientation support at that point either way.

5 Posted by ppk on 10 April 2010 | Permalink

@craig: I do not recommend width/height media queries because width and height don't mean what you think they mean. In combination with the meta viewport they do, but that's a special case.

@tobias: I suppose we could use the iPhone's weird 80/99 aspect ratio as a kind of device detect. But it won't be safe in the long run.

6 Posted by Irae on 10 April 2010 | Permalink

I think it's a metter of design usability and readability that brings us the need for using both properties combined.

A site that I'm doing some tests, I decided to use the viewport with "width=device-width" and NOT to include "user-scalable=no". What this means is that when the iPhone is turned to landscape mode, safari zooms the layout.

One thing that I noted, is that I'm using a font-size that has good reading in portrait mode, but I have like 8 words per line. In landscape mode I wish to mantain the block and positioning scaling, but the main text body itself could be a little smaller, so I could have 10 ou 12 words per line.

Since line-height is proportional, the site would need much less scrolling and would more plesant to navigate. In my tests I'm using the max-width to achieve this. But I'm uncertain to what will happen with Android with some diferent resolutions.

@media query orientation would be much handy in this particular case to gain fine controll of the text and layout.

7 Posted by Daniel on 10 April 2010 | Permalink

@ppk “I do not recommend width/height media queries because width and height don’t mean what you think they mean. In combination with the meta viewport they do, but that’s a special case.”

Are you opposed to meta[name=viewport]? I think that, with the dramatic and unforseen change of letting go of the window metaphor, including viewport information will become a necessity.

Viewport and screen are becoming totally unrelated things because the vieport isn’t framed by a window any more. In retrospectiv I think omitting viewport information is as stupid as naming onclick “onclick” instead of “onactivation”. We haven’d been aware of the fact that viewport size and window size being equal is a special case and only true in special (oldschool) GUIs.

So Craigs solution, which uses media queries and meta[name=viewport] is the real solution, isn’t it?

8 Posted by ppk on 10 April 2010 | Permalink

I'm not opposed to meta viewport, but it doesn't work everywhere. We have to have an alternative for browsers in which it doesn't work. That's device-width, and not width.

Besides, if device-width is equal to meta viewport + width, why use the latter at all? (I'm not yet totally sure that it *is* always equal, but it sure looks like it.)

9 Posted by ppk on 10 April 2010 | Permalink

Oops, I tested it again, and I was wrong. Meta viewport does something different than device width.

High time I publish my widths research, so that everybody knows what I'm talking about.

10 Posted by Axel Berger on 10 April 2010 | Permalink

Is there something similar to "@media all and (max-device-width: 400px)" for standard browsers, preferably older versions too? It would be a good idea to use a different style sheet when users prefer a narrow window.

11 Posted by Nicholas C. Zakas on 11 April 2010 | Permalink

FWIW, screen.width always returns 768 in iPad regardless of orientation. If device-width behaves the same, then this doesn't really give you the correct information either.