PHphilfreo·Jan 7, 2013
It's really not that hard to do a decent job with Retina.
For LESS, I like "retina.less" from http://retinajs.com/
#logo {
.at2x('/images/my_image.png', 200px, 100px);
}
Could easily be adopted for SASS I'm sure.
This avoids the typical double-image downloading (like on Apple's website).
https://github.com/imulus/retinajs/blob/master/src/retina.le...
And if I'm rendering an image JavaScript and want to choose a resolution (like for Gravatar), can detect like this:
app.isRetina = function(){
var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
(min--moz-device-pixel-ratio: 1.5),\
(-o-min-device-pixel-ratio: 3/2),\
(min-resolution: 1.5dppx)";
if (window.devicePixelRatio > 1)
return true;
if (window.matchMedia && window.matchMedia(mediaQuery
Read the rest
).matches)
return true;
return false;
}();