<meta name="viewport" content="width=device-width, initial-scale=1">
Google Developers - Web Fundamentals - Responsive CSS media queries
@JohnMagnolia It took a while, but I completely re-wrote the answer. Thanks for reminding me :) Feedback is appreciated.
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?
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.
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.
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
If you're making a responsive website, you will probably want to use min-width/max-width rather than min-device-width/max-device-width in order to target a wider range of screen sizes.
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.
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.
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.
It is also possible to create queries based on *-device-width; though this practice is strongly discouraged.
Remember to specify a viewport meta tag in the <head> section of your document:
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.
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.