CODEWITHSUNDEEP
htmlcssmedia-queries
LuckyLuke
LuckyLuke

Reputation: 49047

Media queries in CSS

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.

Upvotes: 2

Views: 1004

Answers (2)

darryn.ten
darryn.ten

Reputation: 6973

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

Upvotes: 1

w3uiguru
w3uiguru

Reputation: 5895

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.

Upvotes: 1

Related Questions