83

With CSS media queries you can use max-device-width to target a device width (such as an iPhone or Android device) and/or a max-width that targets a page width.

If you use max-device-width, when you change the size of the browser window on your desktop, the CSS won't change, because your desktop doesn't change size.

If you use max-width, when you change the size of the browser window on your desktop, you might be shown mobile-orientated styling, such as touch-friendly elements and menus and that kind of thing.

Targeting specific browsers (and devices?) is now deprecated and you should be a little more agnostic with what you target. Does that apply to media queries too?

Why would you target one over the other? Which one is the recommended one?

This is an example of a media query I use on a production website:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {  
    /* Change a menu to fit the screen better, etc... */
}

I tend to use both max-device-width and max-width.

Josh Crozier
  • 202,159
  • 50
  • 343
  • 273
Jared
  • 2,780
  • 4
  • 24
  • 38

3 Answers3

115

TL;DR

If you're making a responsive website, use min-width/max-width in your media queries rather than min-device-width/max-device-width in order to target a wider range of screen sizes.

According to the 2018 Media Queries Level 4 specification draft, the device-width media feature is deprecated. It will be kept for backward compatibility, but should be avoided.

8. Appendix A: Deprecated Media Features

To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.

As a side note, remember to specify a viewport meta tag in the <head> section of your document:

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

Explanation

Due to all the different possible screen resolutions and pixel densities a given device can have, a pixel is not a pixel because there are several things to take into consideration (zoom, pixel density, screen resolution and size, device orientation, aspect ratio, etc..). In this case, a pixel is actually referred to as a "optical reference unit" rather than a physic hardware pixel.

Fortunately, you can specify a viewport meta tag in the <head> section of your document in order to control the width and scaling of the browser's viewport. If this tag has a content value of width=device-width, the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.

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

In terms of media queries, you will probably want to use max-width rather than max-device-width, since max-width will target the viewport (current browser window), whereas max-device-width will target the device's actual full screen size/resolution.

In other words, if you are using max-device-width, you will not see different media queries applied when resizing your desktop browser, because unlike max-width, only the device's actual full screen size is taken into consideration; not the current size of the browser window.

This makes a huge difference if you're trying to create an adaptive layout because the site won't be responsive when resizing the browser. In addition, if you're using max-device-width the media queries you're using to target devices with smaller screens will not apply to desktops even when resizing the browser window down to match said smaller screen size.

As of 2018, the latest media query specification draft has actually deprecated the device-width media feature, therefore it should be avoided.

In addition, this article on Google Developers highly discourages the usage of max-device-width:

Google Developers - Web Fundamentals - Responsive CSS media queries

It is also possible to create queries based on *-device-width; though this practice is strongly discouraged.

The difference is subtle but very important: min-width is based on the size of the browser window, whereas min-device-width is based on the size of the screen. Unfortunately some browsers, including the legacy Android browser may not report the device width properly and instead report the screen size in device pixels instead of the expected viewport width.

In addition, using *-device-width can prevent content from adapting on desktops or other devices that allow windows to be resized because the query is based on the actual device size, not the size of the browser window.

Further Reading:

Community
  • 1
  • 1
Josh Crozier
  • 202,159
  • 50
  • 343
  • 273
  • 2
    Agree with everything your saying but forgetting the backwards compatibility side of it, that wont be relevant in a few years. Why should a desktop site work differently because we now have mobiles? – John Magnolia Mar 25 '15 at 11:21
  • 2
    I just don't think a mobile site should ever be displayed on a desktop. You should be able to resize to browser to any width and use the horizontal scrollbar. Say you wanted to compare a section of 2 sites but hide the sidebar, you would open in 2 windows and resize side by side – John Magnolia Mar 25 '15 at 11:22
  • 3
    I agree with John M, google is wrong, I've personally found their responsive design 'documentation' some of the worst fad driven stuff out there, given creedence only because the kids who write it are employed by google. I initially upvoted this, but the answer is wrong in my opinion, just because more and more sites are ruining their desktop user experience, totally non-necessarily to fit a one size fits all responsive css framework (done only to cut dev time in my opinion), does not mean you have to ruin your desktop user's experience. We don't do that, and have increased conversions by 10x. – Lizardx Apr 12 '16 at 20:32
  • "If this tag has a content value of `width=device-width`, the screen's width will match the device independent pixels." And if you're browsing on an iOS device, instead of `dps` it'll correspond to, what? iOS points? (Thank you so much for this post, by the way!) – in_flight Aug 23 '16 at 20:33
  • The answer is a bit outdated. There's nothing wrong with `max-device-width` and it's important if you want to want use it in resizable viewport environments (desktop). `min-device-width` is still bad. – ShortFuse Dec 26 '18 at 20:25
  • @ShortFuse - Usage of `*-device-width` has actually been deprecated in [the latest media query specification draft](https://drafts.csswg.org/mediaqueries-4/#mf-deprecated). When I wrote this answer 5 years ago, I advised people to avoid using `*-device-width`... fast forward to 2018, and the W3 specification draft has deprecated the feature that I said to avoid. So I don't see how you could imply this answer is outdated in that regard... however, I did just update the answer to include the new deprecation notice. Thanks. – Josh Crozier Dec 26 '18 at 21:21
  • @JoshCrozier Check your Google link. It doesn't mention `*-device-width`, only `min-device-width`. Also, depreciation doesn't mean you can't use it. It just means use it with caution. – ShortFuse Dec 26 '18 at 22:38
  • @ShortFuse - It looks like your initial comment is a bit outdated. You stated *"there's nothing wrong with `max-device-width`"* and now you are agreeing that it should be used with caution. Of course depreciation doesn't mean you can't use it... I said that it should be *avoided*, which is what this question was asking in the first place. Even the specification that I linked to deems it as *["not appropriate for newly written style sheets"](https://drafts.csswg.org/mediaqueries-4/#mf-deprecated)*. – Josh Crozier Jan 04 '19 at 18:47
  • I'm assuming you haven't checked the link as I mentioned in the previous comment. Had you done so, you would have understood the context. Using `min-device-width` is UNSAFE. There are Android devices that misreport the value. Google has updated their site. Your comment is quoting outdated information. Please update your comment. – ShortFuse Jan 06 '19 at 01:16
6

Avoid device-width. The reason is you can't know how the users browsers respond to it.

For IOS, it seems to be simple, at least with Safari. It seems to be one single device-width response independent of orientation. Also, device-width is stated only for the shorter side of the device. I did test this on iPhone 4S and iPad. They did respond to 320 and 768 respectively no matter what orientation.

For Android it's more unpredictable. I tested six browsers on a Huawei Ascend Y330 (Android default browser, Chrome, Opera, Firefox, Firefox Beta, Dolphin). The response vary depending on browser type and orientation.

I tested on a page with query (max-device-width: ***px) and to find out what px-value I need to fill in to get the query in a true state. Four different values were needed (320, 480, 534, 800) depending on browser type and orientation. This makes device-width unusable.

Håkan Olsson
  • 81
  • 1
  • 3
  • 1
    device-width is the only reliable way to know the device the user is using so you can adjust layout accordingly. When you adjust layout based upon pixels in the viewport, you end up with mobile design on some desktops just because the user zoomed in. That often results in the opposite of what the user wanted (which is just a little magnification) – Alice Wonder Jan 06 '18 at 20:18
  • You should file bug reports with mobile browsers that do not report an accurate device-width. In many cases, I found that alternative browsers were set by default to pretend they were a desktop browser and use 1 device pixel per CSS pixel - and that's likely the problem you were having. – Alice Wonder Jan 06 '18 at 20:21
5

If you use max-width, when you change the size of the browser window on your desktop, you might be shown mobile-orientated styling, such as touch-friendly elements and menus and that kind of thing.

It's shocking to me that it seems to be popular opinion that this is desirable. I haven't figured out if fluid/liquid design before mobile was considered bad for the wrong or the right reasons. It appears to me that this is just a fancier version of liquid layout, but one that designers are embracing for some reason.

When the design community at large chose to side with fixed layouts over liquid in the mid 2000s, it was because text reflows impeded legibility often resulting in widows and other typogrphical artifacts. Additionally, maintaining the codebase was often tricky from design to design to keep elements from colliding etc. The only difference between liquid layouts and responsive design is that responsive, due to better browsers and the proliferation of masonry-like frameworks make it easier to accomplish.

I personally use min/max-device-width because I prefer to follow desktop document conventions that have decades of precedence. Not all documents you open on the internet are going to behave this way on a desktop, nor are other types of documents or applications that you load on your desktop. Pages designed before the dominance of mobile, just like MS Word, Photoshop, etc. hold their scroll positions and do not change their layouts allowing users to keep track of content within the page flow when performing the unrelated task of window management.

I generally use 3 breakpoints: one for phones, one for tablet and one for desktop. The desktop and often at least the landscape portrait are fixed and the tablet portrait and below are liquid. This combination of adaptive and responsive allows the desktop to behave like a desktop site while keeping me from needed to layout 10-odd separate fixed-width mobile device layouts. The text doesn't reflow on mobile devices because the viewport can't be resized.

Paul Fox
  • 161
  • 2
  • 1
  • 2
    There are some mobiles where the viewport can be resized - for example windows allows "snapping" multiple apps onto the screen, and some android phones have support for windowing to see two apps at once. Objectively I don't see why you wouldn't want a tablet style layout on a smaller screened desktop, but subjectively it depends on the layout. – Mark Aug 08 '14 at 05:25
  • 2
    I was also using min/max-device-width but then to my horror a client set up hotjar, which creates little videos of user interaction with your site, and I realized the new android 6 samsung galaxy 6 was treating the pixel count of min/max-device-width as the actual screen pixels, not the css pixels, which of course made the page go off the screen. In our case what happened was that the users were getting with these 4x pixel density screens a mixture of mobile and desktop css. Personally I don't believe responsive has any place on a well done desktop display, bad for users. So be careful. – Lizardx Apr 12 '16 at 17:50
  • 2
    Paul, it required some research to figure out what's going on. Josh's answer is in my opinion wrong, as is google's. The notion that desktops should be responsive is just a fad being fueled by groups like google and the various one size fits all css frameworks. Our issue came from bad hotjar programming, period. My trigger points basically treat any large screened device as a desktop, with a few tweaks, then go down to where the view port would only be a mobile device. For users looking for clarity, I'd consider paul's answer as correct, and the fad driven responsive answers as wrong. – Lizardx Apr 12 '16 at 20:27
  • 1
    FYI -- as of 2018, the `*-device-width` media feature has actually been deprecated in the latest media query specification draft - https://drafts.csswg.org/mediaqueries-4/#mf-deprecated – Josh Crozier Dec 26 '18 at 21:31
  • 1
    This is an old answer but even in 2014 I would strongly disagree with this. Those typographical errors referenced and 'elements colliding' are so easily avoided by making a habit of following good practices. Screen resolution is getting crazy and true, scalable, responsive design is only going to be more important as time goes on while fixed sites will only become more inaccessible. – little tiny man Jul 08 '19 at 22:20