[SOLUCIONADO] Problema con los tamaños de las fuentes en diseño responsive

[madman_18]

Hola!

Estoy teniendo un problema a la hora de plantear el diseño responsive que me está volviendo loco....

El problema es que el tamaño de la fuente es como si no lo cogiese cuando lo veo en el teléfono. Probando en firefox (en el pc) se me ve como me gustaría, sin embargo abro la web y cuando veo la página en el teléfono de primeras se ve bien pero al cabo de "x" segundos es como si diese un "pequeño salto" y me agranda la fuente.

Os lo pongo en unas capturas para que lo veáis:

Así es como debería verse el texto realmente:

Y así es como se me ve después del pequeño salto que os comento


No entiendo por qué pasa eso....el css que aplico en este caso es el siguiente:

Código CSS:

@media screen and (max-width:320px){
    /*Portada*/
    body{font-size:100%;}
    .menu{display:none;}
    .slicknav_menu{display: block;}
    .cabecera{position:relative;}
    .contenido-cabecera{width:100%;}
    .asistenciaSup{display:none;}
    .contenedor{width:100%;padding: 0 0 20px 0;}
    .bx-wrapper .bx-caption{width:100%!important;}
    .bx-wrapper .bx-caption span{font-size:0.85em!important;}
    .logotipo{margin: 0 auto;float:none;}
    .portada-izquierda,.portada-derecha{width:100%;float:none;}
    .productos-destacados img{float:none;margin: 0 auto;width:50%;}
    .texto-productoPortada{width:95%;}
    .titulo-productoDestacado{font-size:0.8rem;text-align:center;}
    .texto-productoPortada p{font-size:0.8rem;line-height:0.9rem;}    
}
 

Y en la cabecera tengo los <meta> para que reconozca los estilos para móviles

Código HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
 

[estrella_de_Galicia]

¿Has probado con otro navegador en el móvil?

Solo por salir de dudas

[madman_18]

Iniciado por estrella_de_Galicia

¿Has probado con otro navegador en el móvil?

Solo por salir de dudas

Sí he probado tanto con chrome como con safari y ambos actuan igual....... y buscando por ahí, he encontrado este pequeño código

Código CSS:

-webkit-text-size-adjust:100%;
 

Poniéndolo en el body hace la magia y funciona ya como debería :D :D me estaba volviendo tarumba ya jajaja