CSS media feature “resolution” defining pixel density?

Question

'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) {}

if you are trying to detect retina display or not. Then @media screen and (min-device-pixel-ratio: 1.5) as an example. Basically, what is your purpose of targeting dpi? — Huangism
The purpose was intially to target a banner to IOS users (in email). I've read a few methods involving device-width; device height; device-pixel-ratio etc. but they all seemed likely to catch some other devices. That's not a disaster in this case but resolution seemed to be another parameter that might helps isolate further. I'm also just curious to be clear on how the resolution feature works. — fivedoor
with media queries, you cannot target specific device by name. You can target width and stuff but like you said this will include other devices. If you just need iOS, then perhaps you need to look into js. — Huangism
In addition, who can tell what the future holds for us, if you target a specific dpi, there might be devices coming out with that same dpi in the future and you would need to revisit this again — Huangism
thanks! yes I know I can't target a device specifically. Hence I wanted to use all/any media feature available to try narrow things. Alas js + email is not a great combo either — fivedoor

nwalton nwalton · Accepted Answer · 2014-02-13T18:03:19

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:

MDN: Media Queries
iPhone 5 CSS media query (device-aspect-ratio for iPhone)
Media features for common devices

CSS media feature “resolution” defining pixel density?

1 Answers