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:

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.

Media query use
Media query Regular use Occasional use
width 84% 7%
device-width 32% 15%
device-pixel-ratio 25% 18%
height 17% 16%
orientation 13% 20%
resolution 9% 5%
device-height 7% 7%
aspect-ratio 3% 4%
device-aspect-ratio 3% 3%
print 1% 1%

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.

When using the height media query, did you ever run into problems when browsers show or hide their toolbar?
Answer Percentage % of height users
I never use height 62% -
No 22% 58%
Yes 16% 42%

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?

Do you use the em unit in your width or height media queries?
Answer Percentage
Never 37%
Sometimes (1-49%) 24%
Often (50-99%) 16%
Always 15%
Didn’t know it’s possible 7%

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

When creating a responsive design, how many breakpoints do you generally use?
Answer Percentage
3 36%
4 26%
More than 5 16%
2 11%
5 8%
1 3%

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.

In general, how do you use device-pixel-ratio/resolution?
Answer Percentage % of users
I don’t 46% -
DPR 1.5 or higher 30% 56%
DPR 2 or higher 14% 26%
DPR exactly 2 7% 13%
Other 2% 4%
DPR lower than 2 0% 1%

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:

width=device-width

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

Have you ever set the meta viewport width to a value other than device-width?
Answer Percentage
No 62%
Yes 31%
Didn’t know I could 7%

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.

Have you ever used the vw and vh units in a practical project?
Answer Percentage % who know
No 64% 85%
Didn’t know I could 25% -
Yes 11% 15%

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

This is the blog of Peter-Paul Koch, mobile platform strategist, consultant, and trainer. You can also follow him on Twitter.
Atom RSS

I’m speaking at the following conferences:

(Data from Lanyrd)

Categories:

Monthlies: