Construir para Retina Display

15/Dic/2011 358

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. golden goose [#]

    Thanks a lot for providing individuals with an exceptionally marvellous possiblity to read from this web site. It is usually very terrific and as well , jam-packed with a good time for me and my office mates to search your web site at a minimum thrice per week to read the new guides you have. And definitely, I’m just actually pleased considering the tremendous points served by you. Certain two ideas in this article are particularly the most efficient we have had.

  2. yeezy 350 v2 [#]

    I wanted to put you one very small observation in order to thank you so much yet again on your lovely advice you’ve featured in this article. It has been simply seriously generous with you to make unreservedly precisely what many of us could have distributed as an e-book to help with making some bucks for their own end, notably now that you might have tried it in case you decided. Those tips as well worked to be the great way to be aware that someone else have a similar zeal the same as my personal own to know somewhat more with regard to this issue. I’m certain there are millions of more pleasurable periods up front for many who read carefully your website.

  3. moncler outlet [#]

    I intended to send you this little note to be able to give thanks the moment again with your stunning suggestions you’ve shown above. It is quite strangely generous with people like you to grant publicly all that most people could possibly have offered for sale for an electronic book to help with making some profit for their own end, most importantly seeing that you might well have done it in the event you wanted. These tricks in addition acted like the great way to comprehend some people have the same desire similar to my very own to learn a great deal more around this condition. I believe there are thousands of more pleasant situations ahead for individuals who read carefully your website.

  4. kyrie 6 shoes [#]

    I enjoy you because of your own effort on this website. My aunt really likes setting aside time for internet research and it is easy to see why. We learn all relating to the lively mode you present efficient tips and tricks on your website and strongly encourage response from website visitors on that point plus our girl has always been starting to learn a lot of things. Take pleasure in the remaining portion of the year. You are carrying out a really great job.

  5. off white hoodie [#]

    Needed to compose you that little word to finally say thank you over again regarding the stunning knowledge you’ve contributed in this case. This has been simply tremendously open-handed with people like you in giving unreservedly just what many of us would have marketed for an electronic book to help with making some money for themselves, particularly given that you could possibly have done it in the event you decided. The thoughts additionally worked as the fantastic way to comprehend other people online have similar passion similar to mine to know whole lot more pertaining to this issue. Certainly there are lots of more pleasurable situations in the future for those who view your blog.

  6. GustavoVet [#]

    law school personal statement help
    website for resume

CSSLab