CODEWITHSUNDEEP
htmlcssmobilemediatablet
user3288360
user3288360

Reputation: 43

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

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

Upvotes: 4

Views: 5835

Answers (4)

sharklasers
sharklasers

Reputation: 11

Physical pixels and CSS pixels are not the the same on retina/HD mobile displays.

Research the viewport meta tag for information on device-width. i.e. <meta name="viewport" content="width=device-width"> is the CSS pixel width scaled at 100%.

See Viewport Device-Widths for a list of common mobile screen sizes.

Upvotes: 1

Šime Vidas
Šime Vidas

Reputation: 185913

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.

Upvotes: 3

Shiva
Shiva

Reputation: 20935

When you are doing responsive design, you don't actually "detect" the screen size, rather you "target" various size using CSS Media Queries.

If you are using a library like Modernizer for example, that's when you are actually doing detection for various properties.

Upvotes: 0

Damiya
Damiya

Reputation: 834

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

Upvotes: 1

Related Questions