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.

In Media Queries inches/centimemters are CSSinches/CSScentimeters. They are defined by the standard, and can be quite different from what you'd measure with a ruler. For example a CSSinch is defined as 96 pixels, and can be only one third of what you'd measure with a ruler. The good part is this means lots of legacy code continues to work. But the not so good part is it also means physical measures like inches or centimeters are at best pretty much useless in Media Queries, and at worst are downright misleading. — Chuck Kollars
– Chuck Kollars, Commented Sep 28, 2012 at 23:17

w3uiguru · Accepted Answer · 2012-03-01 09:23:27Z

1

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.

answered Mar 1, 2012 at 9:23

w3uiguru

5,9152 gold badges24 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LuckyLuke Over a year ago

But I am not only targeting iphone/ipads

w3uiguru Over a year ago

I just gave you the example to use device width in media queries, my intention not was to show you the way dedicated for iPhone and iPad, sorry for inconvenience.

darryn.ten · Accepted Answer · 2012-03-01 11:42:28Z

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

answered Mar 1, 2012 at 11:42

darryn.ten

6,9933 gold badges50 silver badges67 bronze badges

Collectives™ on Stack Overflow

Media queries in CSS

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related