Construir para Retina Display

15/dic/2011 1

Desde la salida del Retina Display, se duplicó la densidad de pixeles que utilizábamos para diseñar y construir sitios webs para iPhone. Aunque si seguías utilizando los acostumbrados 480x320px de las pantallas anteriores, se nota bastante el pixel en estos nuevos teléfonos. Pero si trabajas para la nueva resolución de 960x640px, ¿qué haces con los modelos anteriores?

Suele ser común el pensamiento que 1 pixel en CSS es 1 pixel en la pantalla del dispositivo. Cuando entramos al nuevo mundo de la alta definición un pixel en CSS termina siendo múltiples en la pantalla. Un ejemplo es si defino un zoom de 2x, entonces 1 pixel de CSS termina siendo 2×2 cuadrados de pixel en el dispositivo. Y eso es lo que está sucediendo desde el iPhone 4.

Entonces, la pregunta es sencilla: ¿Cómo trabajamos con Retina sin dejar de lado las resoluciones anteriores?

La respuesta viene de la mano del potente Mobile Safari y su capacidad de responder mediante CSS3 media queries. Podemos detectar si el dispositivo duplica la densidad del pixel, y si es así modificar el estilo reemplazando las imágenes por una de doble resolución:

<link rel="stylesheet" type="text/css" href="css/normal.css">
<link rel="stylesheet" type="text/css" href="css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" >

El secreto está en que definas las imágenes que querrás se vean de mejor calidad en un iPhone 4+ mediante background-image de CSS, por ejemplo:

normal.css

#logo {
   background-image: url('images/logo.png');
   background-size: 100px 100px;
   background-repeat: no-repeat;
}

retina.css

#logo {
   background-image: url('images/logo_hi.png');
}

Ver ejemplo

Te recomiendo apreciar el ejemplo desde tu teléfono móvil, para que realmente veas los resultados:

Como el navegador va a leer sí o sí normal.css, y por gracia del media="only screen and (-webkit-min-device-pixel-ratio: 2) sólo los dispositivos que tengan duplicados su resolución leerán retina.css y sobreescribirán los estilos definidos en esta hoja de estilos por sobre la anterior. La idea es que sólo definas las propiedades que cambien, no es necesario que reescribas todo el código.

Mediante JS

Otra manera es hacerlo mediante JavaScript, la cual encuentro innecesaria pero de todas maneras dejo la opción:

if (window.devicePixelRatio >= 2) {
   document.write("<link href='css/retina.css' rel='stylesheet' type='text/css' media='screen' />");
} else {
   document.write("<link href='normal.css' rel='stylesheet' type='text/css' media='screen' />");

Links:

Comentarios

  1. Ayuda Web [#]

    No esta mal, pero como lo más optimo es trabajar con sprite, aca es un ejemplo de 4 iconos en una solo imagen, usan la tecnica CSS Sprite. Asi solo tienes un solo archivo CSS y no duplicas el trabajo.

    span.ubicacion {
    background: url(sprite.png) no-repeat 0 0;
    }

    span.enviado {
    background: url(sprite.png) no-repeat -100px 0;
    }

    a.borrar {
    background: url(sprite.png) no-repeat -100px -100px;
    }

    .content a.fav-link {
    background: url(sprite.png) no-repeat 0 -100px;
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2) {
    span.ubicacion,
    span.enviado,
    a.borrar,
    .content a.fav-link {
    /* Referencia @2x Sprite */
    background-image: url(sprite@2x.png);
    /* Traspasa de @2x a @1x */
    background-size: 200px 200px;
    }
    }

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab