En estos días de navidades seguro que a más de uno os habrá caído o os caerá de regalo algún producto de la marca Apple, como un iPhone 5, el nuevo iPad o un MacBook Pro Retina, todos estos productos tienen algo en común, la famosa pantalla “Retina Display” de la que tanto se enorgullecen los de Cupertino.

En este punto os preguntareis, ¿Que tiene que ver eso con el diseño web?

Las pantallas “Retina Display” tienen una densidad de píxeles superior a una pantalla convencional, ya que puede mostrar el doble de píxeles en el mismo espacio, eso provoca que los gráficos de nuestras páginas no se vean todo lo nítidos que podrían ser.

La pregunta es ¿podemos hacer algo? Por supuesto!

Empecemos

La solución fácil es cargar una imagen el doble de grande y ajustarla para que encaje dentro del contenido, así que si por ejemplo tenemos el código CSS siguiente para el logo de nuestra web:

#logo {
background: url('img/polsola.png') no-repeat;
height:120px;
width:120px;
display:block;
text-indent:-9999px;
}

Para que se visualizase correctamente en pantallas “Retina Display” usaremos el siguiente código:

#logo {
background: url('img/polsola@2x.png') no-repeat;
height:120px;
width:120px;
display:block;
text-indent:-9999px;
background-size: contain;
}
¿Que hemos hecho?
  • Cambiamos nuestra imagen por una el doble de su tamaño, en este caso 240x240px
  • Añadimos una propiedad css3 nueva como es el background-size, que básicamente lo que hace es indicarle al fondo, que se reescale hasta ajustarse al tamaño del contenedor.

Así podríamos adaptar todas nuestras imágenes a pantallas retina, pero, ¿que inconvenientes tiene este sistema? Estaríamos cargando siempre imágenes al doble de tamaño necesario aun cuando el dispositivo donde se carga nuestra web no disponga de este tipo de pantallas.

Hace un tiempo escribí una entrada de cómo podíamos usar estilos distintos en nuestra página mediante condicionales dentro del css.

Haciéndolo de este modo, podemos filtrar si el dispositivo que muestra la web tiene una densidad de píxeles superior a la normal y por lo tanto cargar las imágenes con mayor resolución.

Un ejemplo de este condicional podria ser:

/* Retina displays */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

}

Si os fijáis, aunque el pixel-ratio de las pantallas retina es de 2, poniendo el valor de la condición en 1.5, ya agrupamos a dispositivos con una densidad de píxeles mayor a la normal.

Poniéndolo todo junto

#logo {
background: url('img/polsola.png') no-repeat;
height:120px;
width:120px;
display:block;
text-indent:-9999px;
}

/* Retina displays */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
#logo { background-image: url('img/polsola@2x.png'); background-size:contain;  }
}

Resultado

Os dejo con un ejemplo de como se ve el logo de mi página con y sin el nuevo css
[one_half]
before-retina-display

Antes

[/one_half][one_half]
after-retina-display

Después

[/one_half]
¡Y de momento esto es todo por hoy!

3 comentarios en “El diseño web y las pantallas Retina Display

  1. Francisco

    18 abril 2013 el 19:39

    Hola Pol,

    Soy nuevo en este tema y tengo una duda:
    En el código CSS del apartado “Poniéndolo todo junto”, el archivo polsola@2x.png sus dimensiones son 240x240px, y el archivo polsola.png 120x120px.

    Creo que es así, es que no estoy muy seguro.

    Gracias

    • Pol

      18 abril 2013 el 22:26

      Exacto Francisco las imágenes que utilices para mostrar en las pantallas retina tienen que ser el doble del tamaño necesario en las pantallas normales 🙂

  2. Lucas Alonso Rey

    17 julio 2013 el 12:31

    Muchas gracias por compartir.

    Tengo una duda, las pantallas normales suelen ser de 72ppp o 96ppp correcto?
    En las pantallas retina por lo que he podido leer es que se acerca mucho a impresion unos 240ppp, entonces porque tiene que ser el doble de tamaño la imagen? No seria hacer la imagen de 240*240 con resolucion de 240ppp?

    Un Saludo

Deja un comentario