Hacker News Reader

Hacker News

Comment by kevingadd | Hacker News Reader

Parent Full thread

kevingadd

Can you use CSS media queries to detect the display's DPI? I haven't seen any examples of that.

You can at least detect the 'device pixel ratio', which seems to be > 1.0 for Retina devices, so that's something:

http://stackoverflow.com/questions/11722442/is-there-a-way-t...

View on HN

Not sure how well adopted it is, but Bourbon CSS's mixin for serving Hi-DPI assets includes DPI-based media queries:

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 1.5/1),
    only screen and (min-resolution: 144dpi),
    only screen and (min-resolution: 1.5dppx) {
      width: 260px;
    }

Device pixel ratio in CSS is how I've seen every website implement retina support. Definitely possible, and not at all uncommon.

Reply on news.ycombinator.com