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.

Getting Started

First, as with getting all websites to become responsive and adhere to media queries, the viewport meta tag must be placed in the <head> section of your web page. The basic standard version of this is shown below.

<meta name="viewport" content="width=device-width,initial-scale=1">

Once we have this snippet of code in our webpage, if we view the page with different devices, the different media queries will be able to have the correct effect. Without this, viewing the page in the specific device would basically just display a zoomed-out version of your page; it would be attempting to cram your entire website into its 320px wide display. Not good for you or your users! Users don’t like having to zoom to view your website’s content, and they certainly don’t want to deal with the vertical scrolling that would result.

For example, let’s take the iPhone 4, which has a 980px width default viewport. Without the meta tag in place, your attempt at media queries would go horribly wrong and it would incorrectly reference the default viewport. Most mobile media queries target around 500px or under. This is usually accomplished by a simple max-width media query. Without themeta tag, you wouldn’t see this query take effect, since the iPhone 4 would still be displaying the 980px width version of your website. Take a look at the below example:

body {
  background: white;    

@media screen and (min-width: 980px) /* Desktop */ {
  body {
    background: red;

@media screen  and (max-width: 979px) /* Tablet */ {
  body {
    background: blue;

@media screen and (max-width: 500px) /* Mobile */ {
  body {
    background: green;

There are two demo links with accompanying screenshots below, taken using an iPhone 4. Both pages have the above CSS, but one uses the viewport meta tag while the other does not. Please note that if you test the demos, you need to test on a small mobile device to see the correct results.

Here’s the first demo (without the meta tag)

Without viewport meta tag

The above page did not have the meta tag and, as a result, the background is red and is emulating the 980px wide default layout viewport instead of using the 500px mobile media query!

Here’s the second demo (with the meta tag)

With viewport meta tag

Now the meta tag is in place and iOS is correctly showing the page how we want it: It’s based on the 320px width and allowing our media queries to work the way we expect it to.

Why Choose device-width?

I’ll be honest from the get-go and let you know that this article is headed towards not using device-width. device-width does have its place; if you intend on targeting specific devices, then yes by all means use device-width.

From a CSS and RWD standpoint, a good website is one that is essentially ‘device-agnostic’ and does not attempt to pander to each individual device width. Targeting the specific breakpoints for different ‘types’ of devices (e.g. tablets or mobile devices) is achieved by focusing on how the content displays at certain viewport widths and then making changes with media queries as appropriate. So the device does not dictate the breakpoint, the layout and content does, and ultimately this will produce the best results; both from your perspective and for your users.

This might also be why I see people having issues building responsive designs, complaining how difficult it is. But if they are trying to style devices individually, they’re fighting a losing battle: the number of devices you would have to account for (to be thorough) is just too overwhelming and just amounts to poor coding. Also I should mention that if you were to go with device-width, you would have to also provide separate rules for orientation (portrait vs. landscape): device widths do not change simply because you rotate the device sideways. That’s adding even more code, and more headaches!

However, let’s look at the other option we have.

What About “width”?

I’m of the opinion, along with many other seasoned developers, that having a fully responsive page that behaves as expected throughout all possible screen sizes is the easiest and most beneficial way to go about getting the most effective layouts on all devices.

To build a fully responsive and fluid page, the developer simply has to ensure that all viewports are accounted for and the page restructures and resizes as needed to suit the content and the design.

All you need for a fully responsive web page is a fluid website, and some well targeted media queries to target the normal range of mobile devices, tablet devices, and desktop+ viewports. I prefer using Foundation’s Media Queries, which I find to be quite accurate and encompasses all the necessary viewports.

Of course, like anything in development, using width-based queries alone is not a solution to all layout bugs. It likely will still be necessary to test on individual mobile devices for random bugs and rendering quirks, But as far as seeing how the different mobile devices will look, it’s as easy as taking your browser window and resizing it.

For testing, I use the Chrome extension Responsive Web Design Tester. It lets you select a specific device and you’ll see the device size and the way your page will display in that device.

One more quick benefit I’d like to add is that using width-based queries ensures future devices will still display the website fine. It’s essentially future-proof, because you’re targeting something that’s universal — the general viewport size — not something that’s specific to the device.

In Conclusion

Do you still plan on using device-width in your media queries? Were my arguments not compelling enough? Using the regular “width” and the viewport of the device simplifies responsive design and, ultimately, I feel like is the better choice, and something that should be used almost exclusively. Feel free to leave a comment in the discussion below and let me know your thoughts and whether or not you agree.


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!


Glad you found it helpful!


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.

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?


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

Zoomed out === tiny.


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


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!


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.


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!


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?


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.


what is viewport?


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?


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


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!


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 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!


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


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


Well I know why there is (partly) such confusion about the article; appears the newsletter Sitepoint sends out incorrectly describes what the article was about in the promo about the article. Makes sense now why everyone is coming in here asking more specifically about the meta viewport tag. Heard traffic picked up huge after the newsletter showcasing this so I'm guessing this affected many users. I apologize.

Oh well smile .


Hi Ryan,

Thanks for the write up!

Little late on the article but was wondering..

What about using the 'device-width' media query for background image to load different sizes depending on the general size of the device? If you use the 'width' media query - resizing the browser viewport will make unwanted network requests for smaller images and cause white flashes to load the smaller images.

Even with its flaws (e.g. not being accurate with issues of pixels and not being future proof..), this method seems to work.. although I have not extensively tested it. Wondering if there are any better ways to load responsive background images without the previously mentioned 'width' media query setbacks?


Hey - thanks for your comment!

But you have to ask yourself, do any users actually do this? Resize their window? I'd hazard a guess at no.


Still confused. Read through article and comments again and again.

If we are not using device-width, where are we not using it?

Does my viewport statement tag now look like:

<meta name="viewport" content="width,initial-scale=1">



The article is about media queries. Please look at the examples; e.g. max-device-width, apposed to max-width.


Do use it in the viewport meta tag:-

<meta name=viewport content="width=device-width, initial-scale=1" />

But don't use it in media queries, use width:-

@media screen and (max-width: 600px) {}