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.

Retina Display

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

var imagen = (window.devicePixelRatio>1) ? '<img src="imagen200px.jpg" />' : '<img src="imagen100px.jpg" />';

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

Almacenado en tips, javascript

por Jorge Martínez Mauricio :)



¿Algo que comentar?


Suscríbete por correo electrónico, recibirás los nuevos escritos antes que nadie y es gratis 😊

¿Ya conoces los foros de tar?

Relacionadas

    Fotografías de

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