¿Los textos de tus páginas cambian de tamaño o no se visualizan correctamente cuando los ves en un iPhone?
Aquí la solución…
Hoy en día es fundamental probar en todos los navegadores, las páginas que maquetamos, para asegurar la correcta visualización. Pero además, debemos probarlas en los dispositivos móviles mas populares ya que son miles de personas las que acceden a nuestras páginas por medio de smartphones.
Y sin duda uno de los más populares es el iPhone.
Si utilizamos correctamente el XHTML y CSS para maquetar nuestros sitios, nuestras paginas serán prácticamente compatible con cualquier navegador y dispositivo móvil.
Pero, en el caso de los iPhone, suele presentarse el problema de que por mas que hayamos maquetado correctamente, los textos cambian de tamaño o no se adaptan tal cual lo vemos en los diferentes navegadores
Navegando en iPhone…
El navegador por defecto del iPhone, es el Safari. Este navegador interpreta muy bien los contenidos web en HTML y CSS, pero los textos son re-dimensionados y mostrados un poco mas grande de lo configurado en el CSS original, para mejorar la legibilidad.
Y esto, inevitablemente altera la diagramación que hicimos al maquetar nuestra página web.
Por medio de CSS podemos detectar cuando alguien esta navegando por medio de un iPhone, y corregir la visualización de los textos para que los mismos se muestren tal cual el CSS original.
Existe un selector CSS especial para esta acción:
@media screen and (max-device-width: 480px) {
/* CSS para iPhone */
}
La primera línea detecta si se está visualizando desde un iPhone (resolución de 480 px de ancho), si es así, aplica las propiedades que siguen entre las llaves.
La propiedad que debemos aplicar para corregir los textos es:
-webkit-text-size-adjust
Esta propiedad le indicará al navegador, como interpretar el tamaño de los textos.
Dicha propiedad puede tener varios valores:
- none: el texto no se re-dimensionará y se mostrará en su tamaño original.
- auto: propiedad por defecto. Redimensiona los textos para mejorar la legibilidad.
- nn%: porcentaje que indica el factor de zoom con el que se mostrarán los textos.
Si deseamos que no re-dimensione los textos, entonces deberemos aplicar al selector HTML, la siguiente propiedad:
-webkit-text-size-adjust: none;
Con lo cual, el código CSS completo que deberemos incluir en nuestro archivo de estilos, sería el siguiente:
@media screen and (max-device-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
}
No solo podemos aplicar la corrección de los textos, sino que podemos incluir cualquier código CSS adicional que deseemos aplicar cuando el usuario esté navegando con iPhone.
Es muy útil.
¡Usa tu creatividad!
Saludos.
Cristian
PSD a HTML Paso a Paso
Hola Christian, me gusta mucho la forma como nos dices las cosas tan sencillas, fijate que me pase a linux y aca no puedo utilizar el photoshop, pero las demas ideas de maquetacion en general me estan siendo muy utiles, como esta, el texto es uno de los dolores de cabeza del programador, gracias por el aporte.
Gracias Hernst
Me alegro mucho que te haya servido.
Saludos!!!!
Cristian