pais - ¿Cuál es la mejor manera de detectar el soporte de retina en un dispositivo con JavaScript?

obtener navegador javascript

Question

Ahora mismo estoy usando esto:

function is_retina_device() {
    return window.devicePixelRatio > 1;
}

Pero la simplicidad me asusta. ¿Hay un control más completo?

Answer 1

De acuerdo con todo lo que he leído recientemente, los navegadores parecen estar moviéndose hacia la resolution la expresión de consulta de medios. Esto es en lugar de device-pixel-ratio del device-pixel-ratio que se está utilizando en la respuesta actualmente aceptada. La razón por la device-pixel-ratio solo debe usarse como alternativa es que no es una consulta de medios estándar.

Según w3.org:

Una vez, Webkit decidió que se necesitaba una consulta de medios para la resolución de la pantalla. Pero en lugar de utilizar la consulta de medios de resolución ya estandarizada, inventaron la proporción de píxeles de dispositivo -webkit.

Ver artículo completo

Resolución de documentación de consulta de medios

Dado que la resolution está estandarizada y, por lo tanto, el futuro, utilicemos eso primero en la detección para futuras pruebas. Además, como no estoy seguro de que desee detectar solo dispositivos con alto dppx o solo dispositivos con retina (solo Apple), he agregado uno de cada uno. Finalmente, solo como una nota, la detección de Apple es solo un rastreo del agente del usuario, por lo que no se puede confiar en él. Nota: para la función isRetina estoy usando un dppx de 2 en lugar de 1.3 porque todos los dispositivos de Apple Retina tienen un 2dppx.

function isHighDensity(){
    return ((window.matchMedia && (window.matchMedia(''only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)'').matches || window.matchMedia(''only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)'').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3));
}


function isRetina(){
    return ((window.matchMedia && (window.matchMedia(''only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)'').matches || window.matchMedia(''only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)'').matches)) || (window.devicePixelRatio && window.devicePixelRatio >= 2)) && /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
}

Answer 2

En realidad, el código que está utilizando en su pregunta es totalmente correcto si solo le interesan los navegadores modernos. (Consulte: http://caniuse.com/#feat=devicepixelratio )

Todos los navegadores modernos lo han implementado, y los navegadores más antiguos solo recibirían imágenes de baja resolución. No espero que IE10 aparezca en un dispositivo de retina / alta resolución. Además, ¿usar cheques CSS en JavaScript no es más extraño que usar una propiedad de ventana nativa?

Heck, el soporte del navegador devicePixelRatio es incluso mejor que la especificación de resolución. (Consulte: http://caniuse.com/#feat=css-media-resolution )

Yo diría que en realidad es muy seguro de usar, lo usamos en sitios web de producción con más de 10 millones de visitantes al mes. Funciona como se espera.

Lo único que cambiaría es el nombre de la función, ya que la necesidad de cargar imágenes de alta resolución no significa técnicamente que la pantalla sea retina. En realidad, ni siquiera necesita una verificación de número, ya que undefined > 1 da como resultado false .

function is_high_resolution_screen() {
  return window.devicePixelRatio > 1;
}

Answer 3

Si lo desea para imágenes, puede usar retinajs.com o este código es una respuesta común para detectarlo:

function isRetinaDisplay() {
        if (window.matchMedia) {
            var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen  and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)");
            return (mq && mq.matches || (window.devicePixelRatio > 1)); 
        }
    }

Answer 4

devicePixelRatio no es confiable en absoluto. cuando te acercas al 200%, el window.devicePixelRatio te devolverá 2, pero no estás en una pantalla de retina.