Categories:
Partners

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:

CSS Media Dimensions
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 mode

CSS 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 mode

CSS pixel density is 2
Samsung Galaxy S I and II 480 x 800 320 x 533, in portrait mode

CSS 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 mode

CSS pixel density is 1.5
Amazon Kindle Fire 1024 x 600 1024 x 600, landscape mode

Just to complicate things even more, in iPhone and iPad devices, the device-width always corresponds to the width of the device in portrait mode (ie: 768px), regardless of whether the device is in that mode or landscape instead. With other devices, its device-width changes depending on its orientation.

* For a more complete list of devices and their screen resolutions, visit this page.

Lets see some more CSS media queries now that capture different devices and screen dimensions:

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

So we now have a fairly good idea on using CSS media queries. However, there's another important piece of the puzzle we need in order for everything to work as expected, and that's the viewport meta tag.

The viewport meta tag- the key to preparing a page for mobile devices optimization