CSS: I always seem to need multiple identical media queries

Question

So I always seem to do two identical media queries for smartphones, one being the min- or max-width, and the other being the min- or max-DEVICE-width (to target the iPhone and stuff)...

 @media only screen 
 and (min-device-width : 320px)
 and (max-device-width : 480px){

     // Some awesome phone-specific CSS

 }
 @media only screen 
 and (min-width : 320px)
 and (max-width : 480px){

     // THE SAME awesome phone-specific CSS as above

 }

Now I can't help but feel as though this is not the most efficient way to do things... Especially if I'm moving a lot of stuff around/restyling my site/application to be phone specific. Also especially when I have to do two more for the tablet sizes.

Now do I really need both? Does it matter and what exactly is the difference?

Answer 1

The difference between width and device-width can be a bit unclear. I'll try to explain.

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 1280x800. This means the screen is 1280 pixels across, so it has a device-width of 1280 pixels.

In contrast, width refers to the width of your browser's viewport size.

In most cases width is more versatile when it comes to creating responsive webpages (and it is the method I would recommend you'd use), though device-width could be useful when you wish to specifically target mobile devices (and not desktops with a very small browser window).

Answer 2

DEVICE width will target only DEVICES and not desktops, u wouldnt hv any desktop/laptop of width 320x480, so u can use DEVICE width.

Answer 3

You could probably just use max-width: 767px this way you would target everything below an iPad.

I would also just specify dynamic widths so you don't have to differentiate between single devices.