Media queries in CSS

Question

I am trying to apply a CSS for tablets. Tablets have larger displays but the pixel density is not as high as on for example the iPhone 4, Samsung Galaxy Nexus etc.

<link href="css/mobile-tablet.css" media="all and (min-device-width: 600px)" rel="stylesheet" type="text/css" />

If I do that the smartphones will also get that CSS. Is it possible to do this in another way? I don't know if you can check both the number of pixels and the physical width of the screen in centimeters or if there are better ways but.

Answer 1

You can target high pixel-density devices with the min-device-pixel-ratio query like so:

<link rel='stylesheet' href='highres.css' media='all and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 600px), all and (min-device-pixel-ratio: 2) and (min-device-width: 600px)' />

That would target high-res displays with a width over 600px

Answer 2

You can try these media queries it might help you.

<link rel="stylesheet" type="text/css" href="ipad.css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)" />
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-device-width: 480px)" />

Use the range of device width and you can target the devices easily i know there are lot of devices to target but in general you target the devices this way.