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 :)

Reacciones

síguenos en instagram / twitter

Relacionadas

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

    Populares estos días

      blog / fotos / archivo

      Detectar retina display con javascript

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

      tar.mx logo

      última mod vie 11 de octubre de 2013, 13:26