What is the best way to detect smaller devices like mobiles or tablets in CSS?

Question

When i read about responsive design, people always seam to use this statement: @media screen and(max-width: )

But mobile phones today seem to have really great resolution (often more than pc), whats the best way to detect small devices?

Thx ;=)

Answer 1

The screen resolution does not matter. The value used in media queries is the device width. For example:

My phone has a screen with a resolution of 1280x720 pixels. When held upright (in portrait mode) the width is 720px, but since it is an HD screen, it has a 200% ratio, and the resulting device width is 360px. This is the value used in media queries:

/* Even though my phone has a screen width of 720px… */

@media screen and (max-width: 360px) {
     /* 
      * This code will apply 
      */
}

@media screen and (min-width: 361px) {
     /* 
      * This code will not apply
      */
}

The general rule is that phones in portrait mode have a device width less or equal to 400px, regardless of how many actual pixels their screen contains.

Answer 2

You can't directly query physical size.

You can, however, perform a media-type query for DPI along with Height and Width.

Example

@media(resolution: 326dpi) and (device-width: 640) and (device-height: 1136) {
   // Iphone 5s
}

This should be a good starting point: List of displays by pixel density