No sabíamos muy bien por que las imágenes de nuestras aplicaciones web no se veian 100% nitidas en nuestros terminales móviles, pero gracias al buen artículo publicado en thesedays.com hemos mejorado la resolución de las imágenes en móviles iPhone y Android.
Por defecto, iPhone 4 muestra las imágenes al 200% de su tamaño, ya que su resolución es mucho mayor que la de su hermano pequeño. La solución es duplicar las imágenes de la aplicación al doble de su tamaño y usar una media querie en nuestro CSS que haga referencia a dicha imagen para este tipo de dispositivos.
.myImage {
height: 40px;
width: 100px;
-webkit-background-size: 100px 40px;
background: url("images/myImage.jpg");
}
@media screen and(-webkit-device-pixel-ratio: 2) {
.myImage {
background: url("images/myImage@2x.jpg");
}
}
Debemos de tener en cuenta dos lineas de este CSS:
- -webkit-background-size: fuerza al navegador a mostrar la imagen de fondo al tamaño deseado. Aquí pondremos el tamaño de la copia «pequeña». Así la copia grande de la imagen se repesentará al tamaño de la pequeña
- @media screen and (-webkit-device-pixel-ratio: 2): Media querie para iPhone 4. Lo que esté desde de las llaves solo lo ejecutara iPhone 4 (o futuros terminaes que tengan un pixel ratio de 2)
¿Y que pasa con los móviles Android?
Vale, haciendo esto todo nos va a ir mucho mejor en iPhone 4, pero que pasa con los Android. Yo tengo un Samsung Galaxy S II, y tenía el mismo problema. También veía las imágenes poco nítidas.
Mi primera solución, ha sido el remplazar la media query del pixel ratio por otra para todos los navegadores webkit (practicamente todos los que se usan ahora en móviles y tablets):
@media screen and (-webkit-min-device-pixel-ratio:0) {
}
Con esto podremos hacer el «truquito» del redimensionado de imágenes en todos nos navegadores webkit.
El resto de navegadores seguirá viendo la imagen pequeña sin problemas.
Estoy empezando utilizar esta técnica, y puede que surjan muchos bugs. Si conocéis algún sistema mejor para resolver este problema contármelo, y lo publicaremos en la web.
Últimos consejos
Tampoco debemos de olvidarnos de otros trucos para mejorar nuestra maqueta en móviles como:
- Usar la siguiente meta etiqueta:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
- Forzar al navegador a no redimensionar el texto con la rotación de la pantalla
body {
-webkit-text-size-adjust: none;
}
- definir un ancho minimo de 320 pixels
min-width: 320px
