Detectar retina display con javascript

En estos tiempos de aplicaciones móviles con HTML, es necesario servir contenido más adecuado al tamaño de las pantallas... esto es, los iPhone con Retina Display y Android con no-se-que-tecnología que tienes muchos miles de pixeles por pulgada, en lugar de los clásicos 72 o los que muestre un monitor tradicional.

Se puede usar para pedir imágenes de distinto tamaño para mostrar, algo como lo que sigue:

var imagen = (window.devicePixelRatio>1) ? 'imagen 200' : 'imagen 100';

Básicamente le indicamos que si window.devicePixelRatio es mayor a 1 (pantallas normales) entonces me muestre una imagen de otro tamaño. Se puede combinar con screen.width también para elegir que imagen podemos mostrar, más adecuada a la resolución del usuario.

En el caso de ser un iPhone 4 en adelante, muestra devicePixelRatio como 2, en el Samsung Galaxy S4 por ejemplo, muestra el valor de 3.

+ fotos / videos

Almacenado en tips, javascript

por Jorge Martínez Mauricio :)

blog / fotos / archivo

Detectar retina display con javascript

tar.mx es un blog sobre fotografía, tecnología y otras chunches

modificado martes 13 de julio de 2021, 13:08