width versus device-width
In CSS media the difference between width and device-width can be a bit muddled, so lets expound on that a bit. device-width refers to the width of the device itself, in other words, the screen resolution of the device. Lets say your screen’s resolution is 1440 x 900. This means the screen is 1440 pixels across, so it has a device-width of 1440px. Most mobile phones have a device-width of 480px or lower, including the popular iPhone 4 (with device-width: 320px), despite it technically having a 640 x 960 resolution. This is due to iPhone 4’s retina display, which crams two device pixels into each CSS pixel on the screen. This is true for the Ipad 3 as well; its reported device-width is 768px just like its predecessors, even though its actual screen resolution is 1536px x 2048px. In general width is more versatile when it comes to creating responsive webpages, though device-width is useful when you wish to specifically target mobile devices (and not desktops with a small browser window for example), as rarely do desktops have screen resolutions below a certain number such as 320px x 480px.
The below shows the screen resolution and CSS media device dimensions of some of the popular devices out there:
| Device | resolution (px) | device-width/ device-height (px) |
|---|---|---|
| iPhone | 320 x 480 | 320 x 480, in both portrait and landscape mode |
| iPhone 4 | 640 x 960 | 320 x 480, in both portrait and landscape modeCSS pixel density is 2 |
| iPad 1 and 2 | 768 x 1024 | 768 x 1024, in both portrait and landscape mode |
| iPad 3 | 1536 x 2048 | 768 x 1024, in both portrait and landscape modeCSS pixel density is 2 |
| Samsung Galaxy S I and II | 480 x 800 | 320 x 533, in portrait modeCSS pixel density is 1.5 |
| Samsung Galaxy S III | 720 x 1280 | 360? x 640?, in portrait mode |
| HTC Evo 3D | 540 x 960 | 360 x 640, portrait modeCSS pixel density is 1.5 |
| Amazon Kindle Fire | 1024 x 600 | 1024 x 600, landscape mode |