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 mode.
device-pixel-ratio is 2 |
| iPhone 5, 5s | 640 x 1136 |
device-pixel-ratio is 2 |
| iPhone 6 | device-pixel-ratio |
|
| iPhone 6 plus | 1242 x 2208 | device-pixel-ratio is 3 |
| 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, 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 (min-device-width: 320px) and (-webkit-min-device-pixel-ratio:
2){
/* some CSS here */
}
/* #### iPhone 5 Portrait or Landscape #### */
@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio:
2){
/* some CSS here */
}
/* #### iPhone 6 and 6 plus Portrait or Landscape #### */
@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio:
3){
/* 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.
- Introduction to CSS media queries
- width versus device-width
- The viewport meta tag- the key to preparing a page for mobile devices optimization
- CSS media query matching in JavaScript using window.matchMedia()
The viewport meta tag- the key to
preparing a page for mobile devices optimization
