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:
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.
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||Regular use||Occasional use|
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.
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.
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.
width=device-width). It’s impossible to tell which one. That makes it unreliable.
width=device-widthis applied the two media queries yield the same results.
This is somewhat counter-intuitive, but such things happen all the time in web development.
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.
|Answer||Percentage||% of height users|
|I never use height||62%||-|
So yes, a larger minority of height users runs into the toolbar problem and I’ll have to say something useful about it.
A while back I had to be reminded that use of the em unit in media queries is popular. How popular?
|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.
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.”
|More than 5||16%|
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.
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.
|Answer||Percentage||% of users|
|DPR 1.5 or higher||30%||56%|
|DPR 2 or higher||14%||26%|
|DPR exactly 2||7%||13%|
|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:
Do people use something other than
|Didn’t know I could||7%|
About one third does. Good that I already did the research. More statistics can be found here.
Finally, a question about the vw and vh units that specify percentages of the viewport width and viewport height.
|Answer||Percentage||% who know|
|Didn’t know I could||25%||-|
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.)
I’m speaking at the following conferences: