Lo que normalmente llamamos pantalla Retina (o Retina Display) es una marca comercial de Apple para referirse a las pantallas de alta densidad de píxeles fabricadas y desarrolladas por Sharp y utilizadas en sus dispositivos desde el iPhone 4S y el iPod Touch a partir de la cuarta generación. Está basada en la tecnología In-plane switching (IPS) y se distingue por tener una densidad de píxeles por encima de los 300 ppp.

Como ya vimos en un articulo anteriormente publicado en este mismo blog, gracias a CSS3 podremos usar las denominadas Media Query para poder diseñar nuestra Web Responsive. Una de las posibilidades que nos ofrecían éstas era la de distinguir entre una pantalla con una densidad de píxeles u otra, esto nos permite saber cual es la densidad del dispositivo con el que estamos visualizando la web y trabajar en función a ello, para poder aplicar unos estilos, mostrar unas imágenes o simplemente mostrar u ocultar cierta información.

La idea principal es la de reemplazar unas imágenes más pequeñas por otras más grandes y así poderlas visualizalas con mejor calidad y con ello aprovechar al máximo esas pantallas Retina.

Observar el siguiente ejemplo para apreciar la diferencia de como se podría ver con una imagen normal y con otra más grande:

Usando la Media Query de CSS3:

@media only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
       /* Reglas CSS a aplicar */
}

La Media Query que mostramos asignará los estilos para la resolución de la pantalla con una relación de pixel del dispositivo mínimo de 2 o con resolución mínima de 192dpi.

Para saber cual es el número de dpi de una pantalla dividimos la resolución de la pantalla con sus pulgadas de diagonal. Por ejemplo, una pantalla de 13.3 pulgadas con resolución de 1280 × 800 de resolución nos dará 96 (dpi). Así, el número de 192 que hemos mostrado en el fragmento de código anterior es simplemente el doble de ese número (96 ppp).

Una vez que hemos definido nuestro CSS desearíamos poder probar éstos pero si no contamos con una dispositivo con la densidad de píxeles deseadas tenemos un problema… Una forma muy simple de poder simular una pantalla con cierta dpi es usar Firefox. A partir de la versión 22 (vamos por la 25.0.1) de Windows tenemos la posibilidad de editar el denominado device-pixel-ratio para así poder jugar con distintos valores de dpi.

Pasos para cambiar el device-pixel-ratio:

Paso 1
Abrir una nueva pestaña en Firefox
Paso 2
En la barra de direcciones escribir “about:config” y pulsar Enter. Seguramente nos diga que tengamos cuidado con lo que hacemos en las configuraciones.
Paso 3
Buscamos la siguiente propiedad “layout.css.devPixelsPerPx“.
Paso 4
Nos permitirá realizar los cambios tras hacer doble clic sobre ella. Valores entre 0,05 y 1,0 reducen el tamaño de la fuente. Valores superiores a 1,0 la aumentan. Para simular el ejemplo pondríamos un 2 (si nuestra pantalla es de las características indicadas, sino habrá que calcular o jugar un poco con el valor).
Paso 5
Abrir una nueva pestaña y cargar tu página web. Podrás ver los cambios que se producen como si estuvieras en un dispositivos con esa densidad de píxeles.

Si desean dejar el valor por defecto sólo has de poner un -1 en el valor y listo.