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:
Ver original@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:
Ver original<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"/>