CODEWITHSUNDEEP
cssmedia-queriesresolution
fivedoor
fivedoor

Reputation: 389

CSS media feature "resolution" defining pixel density?

'Resolution' seems to be often used as a term to describe viewport dimensions/device pixels expressed in terms of a x b:

e.g. 960px x 640px (for iPhone 4)

However from what I understand that's a bit of a misappropriation as used in media queries, at least, resolution denotes the density of pixels of an output device.

Can I confirm that the media feature 'resolution' is essentially expressing pixel density?

i.e. the diagonal pixel resolution of the display divided by diagonal size (in inches)

So, taking the example of the iPhone 4 again, the resolution would be defined as 330 ppi? (or 330dpi)

I'm essentially interested to know whether the resolution feature could be used to target a device(s) with specific pixel density.

In Brian LePore's article he suggests mobile devices round the actual dpi value to "120 DPI for a low density screen, 160 DPI for a medium density screen, 240 DPI for high density, and finally 320 DPI for extra high density".

Is this correct and would that mean that you can't actually target a specific dpi?

i.e.

@media screen and (resolution: 330dpi) {}

and

@media screen and (resolution: 311dpi) {}

will ultimately both be treated as /rounded to

@media screen and (resolution: 320dpi) {}

Upvotes: 0

Views: 2408

Answers (1)

nwalton
nwalton

Reputation: 2061

Yes, resolution is definitely expressing pixel density.

If you want to be as targeted as possible for iPhones, you might try using several of the available queries, and setting the values specifically to iPhone specs.

iPhone 5 would be something like this:

@media screen
and (-webkit-min-device-pixel-ratio : 2)
and (device-aspect-ratio : 40/71)
and (device-height : 568px)
and (device-width : 320px)

You can test media queries of different devices by going to the page http://pieroxy.net/blog/pages/css-media-queries/test-features.html on that device. The only strange result I'm getting is that it doesn't return a resolution value for iPhone 5. However, I'd be surprised if the above query targeted anything other than iPhone 5. (Sorry I don't know more specifics about resolution to answer your second question.)

More info at:

Upvotes: 1

Related Questions