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 640x960. This means that, in this example, the device-width of the iPhone4 is 320x480. 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 %Media Queries: Width vs. Device Width%

by Ryan Reese via SitePoint