iPhone trae Safari como browser predeterminado el cual interpreta a la perfección las paginas HTML, además para facilitar la lectura tiene la propiedad de ajustar el tamaño del texto, es decir los textos son re-escalados y mostrados mas grandes mejorando la legibilidad pero en ocasiones alterando la distribución que habíamos planeado.
CSS para iPhone
Hay varias formas de detectar el browser para iPhone y aplicar CSS especificos pero uno de los mas sencillos es un selector especial que nos permitirá aplicar reglas solo aplicables al iPhone.
@media screen and (max-device-width: 480px) {
/* iPhone CSS */
}
Esto lo podemos incluir en nuestra hoja de estilos, con lo cual agregamos funcionalida para iPhone.
Ajustando el texto en iPhone
Para controlar el tamaño de los textos se puede hacer uso de la propiedad -webkit-text-size-adjust con el cual podemos indicar como interpretar el tamaño de las tipografías. Esta propiedas puede tener los siguientes valores:
- none: el texto no será escalado y se mostrará en su tamaño original.
- auto: propiedad por defecto y redimensiona los textos para mejorar la legibilidad.
- nn%: porcentaje que indica con que factor de zoom se mostrarán los textos.
En mi caso prefiero que el texto no se re-escale para mantener el aspecto que tiene el diseño en los browser normales, entonces la hoja de estilos sería.
@media screen and (max-device-width: 480px) {
html { -webkit-text-size-adjust: none; }
}
Pueden encontrar mas información acerca de como preparar contenido para iPhone en Designing Content for iPhone.
