What is the difference between width and device-width in CSS?
I know there have already been some questions around this, but I would like to understand these from a media query perspective to sniff browser/device, e.g. desktop/mobile/tablet.
The device-width and device-height features refer to the dimensions of the output device (that is, the screen size).
The width and height features, on the other hand, refer to the dimensions of the rendering surface, which is the viewport (for example, the browser window) for screen media, or the page box for print media.
http://reference.sitepoint.com/css/mediaqueries#mediaqueries__tbl_media-queries_media-features