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

css, html, media, mobile, tablet

Solution

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.

Problem

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 ;=)

Original source