🥇 Detectar telas HiDPI (Retina) em JavaScript

Quando você está construindo URLs de imagem dinamicamente via JavaScript, pode ser útil saber se você precisa mostrar imagens @ 2x.

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).matches)
        return true;
    return false;
}();

(impulsionado por https://github.com/imulus/retinajs/blob/master/src/retina.js )

Por exemplo, Close.io usa isso para renderizar imagens de perfil do Gravatar.

getGravatar: function(size) {
    var url = this.get('image');
    if (!url) return null;
    if (app.isRetina) size = size * 2;
    return url+'?d=mm&s='+size;
},

Related Posts