I'm writing a CSS book

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

contact

Media query/RWD/viewport survey results

This week I ran an eight-question survey of media query use, responsive web design fundamentals, and one viewport question. 1251 web developers reacted. This entry presents the results.

Most important conclusions:

• Nearly 50% of web developers (occasionally) use device-width and expect it to work the same as width. It doesn’t right now, but it will in the future.
• Many web developers are not aware that a cross-browser resolution check needs both the -webkit-device-pixel-ratio and the resolution media query.
• The most popular resolution query is “larger than 1.5;” a very welcome bit of sanity.
• ems in media queries are not used all that often — only 31% use it in more than 50% of their projects.
• 16% use more than five breakpoints in their responsive design.

Media query use

I wanted to know which media queries are being used in practice. I asked two questions, and respondents could check any media query that applied.

1. Which media queries have you used AT ALL in practical projects in the past year?
2. Which media queries have you used in MORE THAN HALF of your practical projects in the past year?

The Regular use column below is based on the second question. I subtracted the result of the second question from the result of the first, and the Occasional use column shows this.

There are two really curious cases here: the huge amount of use for device-width, and the huge difference between device-pixel-ratio and resolution.

Resolutions

Let’s start with that last case. About one quarter of web developers wants to know what resolution they’re on — most likely in order to use some sort of responsive images solution.

The problem here is that device-pixel-ratio works only in WebKit-based browsers. In order to get it working in the rest you need the resolution media query. But most web developers don’t know that. 25% regularly uses device-pixel-ratio; only 9% regularly uses resolution.

The resolution media query is going to win here. Chrome already supports it, and I assume the WebKit-based browsers will follow. They’ll probably continue to support device-pixel-ratio, too, but the non-WebKit browsers will not start to support that one.

device-width

Then the curious case of device-width. It always uses the value of screen.width, and that property is completely unreliable. So what’s going on here? Do 32% of web developers make a serious mistake without noticing?

The answer turns out to be complicated. Bear with me.

1. device-width either uses the width of the screen in physical pixels, or the width of the ideal viewport (the one you get with width=device-width). It’s impossible to tell which one. That makes it unreliable.
2. The iPhone gives the width of the ideal viewport. Therefore, if width=device-width is applied the two media queries yield the same results.
3. Therefore I expect that developers tested it on the iPhone, found that it works, and didn’t bother to test on other browsers — notably Android WebKit, which uses the other definition.
4. Therefore a lot of websites use device-width instead of width.
5. The browser vendors picked up this trend, and decided to change their definition of screen.width and device-width to the ideal viewport. Notably Chrome, Opera, and Firefox Android did so.
6. Therefore it becomes safer and safer to use device-width, and its usage will only grow with time.

This is somewhat counter-intuitive, but such things happen all the time in web development.

height

The height media query is used at least occasionally by one-third of web developers. This was a surprise to me, since I couldn’t see many use cases. That was my mistake, though: they’re there.

When I studied this media query I noticed that in many browsers, notably Android WebKit, the height of the page changed if the browser toolbar scrolls into or out of view. I wondered if people who use height ever ran into that problem. Turns out some do.

So yes, a larger minority of height users runs into the toolbar problem and I’ll have to say something useful about it.

The em unit

A while back I had to be reminded that use of the em unit in media queries is popular. How popular?

Although ems are certainly being used, my Twitter followers tended to overstate their popularity. I’ll do some research into ems (especially when the formula em-width = pixel-width / default font-size breaks down), but it’s become less of a priority.

Breakpoints

For fun, a question about breakpoints. Unfortunately I made a mistake here: I assumed that most people wouldn’t go beyond five of them, but I was somewhat wrong. This question didn’t have an Other box, either, so I have no further data on “More than 5.”

Although about two-thirds of web developers use three or four breakpoints, 16% uses more than five. One follower even said he uses 20-40 breakpoints, which seems rather a lot to me.

Resolution

The device-pixel-ratio and resolution media queries are fairly popular. How are they being used? The curious thing here is that an answer I added at the last moment, just to have more answers available, turns out to be the most popular one.

Nearly half of web developers doesn’t bother to read out the resolution, and I can sympathize with that, as long as we’re not totally clear on what to do with higher resolutions.

Of the ones that do, more than half checks if the DPR is 1.5 or higher. This is a nice moment of sanity. I was very afraid that the most-selected answer would be “exactly 2” because iPhone, but that turns out not to be the case. There’s still hope.

Some of the Other answers are interesting:

• "Using it as a multiplier for thumbnailing images."
• "To detect some Android tablets that have sketchy window.width."
• "Depends on the need. Always use min/max, never use exacts"
• "Send to server (so script, not CSS media query); map tiles scaled appropriately"
• ">= 1.3" (2x)
• "target-densitydpi=device-dpi"
• "I don't check dpr in the css.. in the case of images i have my own JS responsive image plugin (pictureserve)."

width=device-width

Do people use something other than width=device-width?

About one third does. Good that I already did the research. More statistics can be found here.

vw and vh units

Finally, a question about the vw and vh units that specify percentages of the viewport width and viewport height.

Not too many people use it, but a full quarter of web developers doesn’t know these units exist. So more research is required. Most important question: WHICH viewport do the units take percentages of? (Spoiler: usually the visual one — but there’s a catch I haven’t figured out yet.)