Hacker News Reader

Comment by aaronbrethorst | Hacker News Reader

This looks great! How do I specify a media query for different screen densities? For instance, if I wanted to serve a 2880px wide image to a 15" Retina MacBook Pro and a 1440px to a 'normal' computer?

View on HN

There's a media query available (with prefixes, right now) for pixel density – a retina MBP reports it as 2 whereas a standard one reports it as 1. So you can have a media query for a pixel density >= 2, etc.

> with prefixes, right now

Right, which is what concerns me. So is this the expectation?

    <img src="small.jpg" data-interchange="[normal.jpg, (only screen)], [medium.jpg, only screen and (min--moz-device-pixel-ratio: 2), 
        only screen and (-o-min-device-pixel-ratio: 2/1), 
        only screen and (-webkit-min-device-pixel-ratio: 2), 
        only screen and (min-device-pixel-ratio: 2),
        only screen and (max-width: 749px)]">

Lamentably, yes. I'd suspect the prefixes will drop off this year but we're sort of stuck with the browser adoption in this case.

maybe fat-fingered on a phone? (edit: referring to its previous downvoted state)

Reply on news.ycombinator.com