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.
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.
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
