Tuesday, January 15, 2013

Problemas con el tamaño de los fonts cuando cambia la orientación de su Navegador móvil?

Programación > Móviles

Después de pasar varias horas en busca de un supuesto error en el HTML o el CSS de un proyecto, de frustrarme hasta que te dan ganas de tirar la laptop contra el piso y de que apareció un amigo que encontró la solución mágica del problema buscando en Internet pues creo que merece la pena dejarlo por escrito a ver si otros pobres del mundo no sufren lo que me ha tocado hoy.

El proyecto es bastante complejo y quizás eso hacía ver el problema como consecuencia de algún error interno. Pero el problema era tan simple como que un DIV mostrando simplemente texto no era capaz de mostrarlo de forma correcta en ambas vista u orientaciones, Portrait y Landscape, cuando íbamos de la primera a la segunda y regresabamos de nuevo a Portrait.

Era para volverse loco. Revise varias veces los estilos para ambas vistas, cambie todas y cada una de las unidades de medida del FONT-SIZE de “pt” a “px” y todo en vano. Lo más frustrante es que por momentos algún cambio hacía que se visualizara correctamente y después todo se desvanecía. Por otro lado en la PC todo funcionaba a las mil maravilla y evidentemente en el móvil todo se hace más difícil de depurar.

Para no darle más vueltas al asunto pues ya he perdido suficiente tiempo por hoy, jeje, la solución radica en poner en el CSS la siguiente línea de código:

-webkit-text-size-adjust: none;

Asi de sencillo??, pues si. Es una de las tantas magias oscuras que posee WebKIT. Este problema puede tenerlo cualquier WEB que se visualice en un dispositivo móvil con algún Navegador basado en webkit, como Safari y Chrome. En mi caso estaba probando sobre un iPhone5 y un tablet Nexus7 de Google.

Creo que a partir de hoy vendre a este Blog a copiarla y pegarla en cada proyecto nuevo que comience.

No comments:

Post a Comment