Media Queries: Width vs. Device Width

HTML & CSS
1

Originally published at: http://www.sitepoint.com/media-queries-width-vs-device-width/

Far too often I see people don’t quite understand the differences between width and device-width (and expanding upon that, other examples such as min-device-width and max-device-width), when using CSS media queries. This misunderstanding results in poor code and ultimately more work for the developer. I’ve seen this question quite often over on the SitePoint Forums, so I felt it was time to give some further explanation. I’ll be touching on this, along with expanding on which option you should be using when building your responsive websites.

Basic Definitions

Let’s define what we mean when we talk about media queries based on “width” and “device-width”. The following quotes are from MDN’s article on Media Queries and below is the definition of “width”:

The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).

And following is MDN’s definition of “device-width”.

Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

So what does this really mean? Well, in basic terms, width and device-width refer to the width of the device and not the width of the viewport, which could be something totally different. All you are essentially interested in is the width of the viewport no matter the device.

However the main difference between width and device-width is that device-widths don’t always match the layout viewport of said device.

Many tablets and mobile devices don’t always have 1 device pixel per CSS pixel. The iPhone 4, for example, has 2 device pixels per CSS pixel. For reference, you should know that the iPhone 4 has a regular screen layout viewport of 640×960. This means that, in this example, the device-width of the iPhone4 is 320×480. This is the case because Apple realizes that not every website is built responsively (shame on them) and tries to please everyone by having around 980px width to accommodate the desktop view of the website. This means, that if there is no meta viewport tag in place, the iPhone4 will take your website, render it as if it were 980px wide, squish it into a 320px display, and as a result, would be zoomed out to the user.

Continue reading this article on SitePoint
2 Likes
2

Great read, you bring up a lot of valid points in regard to targeting all devices and future ones. This will save me quite a few headaches!

1 Like
3

Glad you found it helpful!

1 Like
4

I keep telling the participants of my workshops to avoid device-width for a long time now, so I fully agree.

In the draft from January for Media Queries Level 4 the device-width is depricated anyways.

1 Like
5 
iPhone4 will take your website, render it as if it were 980px wide, squish it into a 320px display, and as a result, would be zoomed out to the user.

Without device-width, wouldn’t the content appear too tiny on iPhone4?

6

I assume you mean the meta viewport tag? If so…then look below.

Zoomed out === tiny.

1 Like
7

The article is a little bit confusing in mixing device-width from meta tag and device-width in @media. You can’t create responsive website without device-width in meta in head, but you should never use device-width in @media in your CSS. Either that or I don’t get the article at all… :blush:

1 Like
8

The whole point was that you need the meta viewport tag and then DON’T use device-width in the CSS. That much was abundantly clear and was clearly stated.

Unless I don’t understand you :wink: .

Please give me sections of the article you found were unclear and I’ll try to explain in clearer words. I’m here to help all users learn!

9

Instead of using an extension – I always try to keep them at minimum necessary –, you can use the DevTools too. Just click on the little phone on the DevTools toolbar, you can even visualize the media queries and change your site dimensions without changing the browser window size.

1 Like
10

Really? Thanks for that; I usually just resize the browser but occasionally I’d use the extension. I put that in there for people to make it easier to be completely honest. It makes it easier for people to transition into just using the desktop browser to get it fully responsive. Thanks for the information!

11

I think your article was pretty confusing to be honest, because I was under the impression you were referring to not using device-width in the meta viewport, which I was racking my brain for a good reason no to.

The section:

did not refer to media queries and just followed the section on the viewport meta tag. I was assuming from that flow of dialog that you were referring to the viewport meta tag and there was no example code of device-width in a media query to clarify. Your write up is pretty confusing, I’ve got to say.

I’m not sure who would actually use device-width in their media queries anyway, does anyone do this?

12

The title of the article refers to media queries though.

Under the premise of the article being about media queries, the rest should make sense, yes?

A very surprising amount of people, judging by all the people who come here for support. I find myself constantly repeating myself on this issue, along with a handful of other members. I am surprised how much I see it. I hoped this article would curb that some.

1 Like
13

what is viewport?

14

Perhaps this can offer some help.

1 Like
15

At first I also thought that you’re discouraging us from using device-width in the viewport meta tag, but then realized you’re talking about @media queries. I was confused because I didn’t know anyone was practicing it, I’ve never seen it in the wild and had never heard anyone talking about it.

It’s an interesting insight that people actually use it, where do you think they got it from?

16

It’s available so people use it. One of those things that should probably be removed.

17

Great explanation of the differences between width and device-width in media queries. Good to know the effects of each.

However, like others I was also initially confused—at first I thought you were discouraging use of device-width in the meta tag rather than in media queries. I understand that the title of the article and introductory paragraphs referred to media queries, but it never hurts to be unambiguously clear, especially given the identical naming but different recommendations between the meta tag and media queries. Even a short note in bold that says you’re referring to media queries, not the meta tag, would suffice.

Regardless, very informative article. Thank you!

1 Like
18

Thank you for your feedback! I guess this is a case of I already know what I’m talking about but users don’t necessarily know what I am talking about.

This was my first actual article that will be read by a wide user base. Always room for improvement :slight_smile: . I don’t consider myself a great writer so all this advise will be in my head for my next article I’m working on. Thanks!

19

Instead of content="width=device-width, you suggest we use … ?

20

The article is about media queries. Not the meta tag.