Hacer tipografía Responsive

[madman_18]

Buenas a todos!

Estoy teniendo un problema haciendo un diseño responsive de una web... Leyendo por ahí y demás, recomiendan usar medidas rem o em a la hora del diseño responsive.

Lo estoy aplicando así pero cuando hago pruebas (en un iphone, tanto en chrome y safari) al pasar de vertical al horizontal es como si hiciese zoom en la tipografía (como si de medir 12px pasase a 16px) y hasta que no recargo no se visualiza al tamaño que quiero.

Mi media queries por ejemplo en un bloque, es tal que así:

Código CSS:

/*Movil en vertical*/
.tituloSeccion span{font-size:1.4rem;}
 

Código CSS:

/*Movil en horizontal: probando font*/
.tituloSeccion span{font-size:0.4rem;}
 

Ambos códigos en su correspondiente @media queries claro

¿Alguien sabe qué tengo que mirar más para que la tipografía se adapte? Gracias!!!!!!!!

[pzin]

La tipografía es una cosa y la fuente otra.

A mi personalmente no me gusta que cambie el tamaño de la fuente al cambiar la orientación del dispositivo. No le veo mucho sentido, porque tendría que ser el mismo tamaño ya que sigue siendo el mismo dispositivo. De hecho al cambiar la orientación lo que busco es tener más espacio para leer/ver, entonces si me cambian el tamaño me molesta porque no es lo esperado.

Bueno, y el código está cambiando el tamaño 1rem que, a priori, parece mucho.

¿Tienes puesta la meta-etiqueta para el viewport?

[madman_18]

Iniciado por pzin

La tipografía es una cosa y la fuente otra.

A mi personalmente no me gusta que cambie el tamaño de la fuente al cambiar la orientación del dispositivo. No le veo mucho sentido, porque tendría que ser el mismo tamaño ya que sigue siendo el mismo dispositivo. De hecho al cambiar la orientación lo que busco es tener más espacio para leer/ver, entonces si me cambian el tamaño me molesta porque no es lo esperado.

Bueno, y el código está cambiando el tamaño 1rem que, a priori, parece mucho.

¿Tienes puesta la meta-etiqueta para el viewport?

Sí tienes razón en lo de tipografía y fuente :D

La verdad que es que estoy haciendo pruebas porque es lo que comentaba, es como si me hiciese un zoom a la hora de cambiar el tamaño el dispositivo.
Tengo la etiqueta meta tal que así

Código HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no"/>
 

[madman_18]

Buenas....Veréis sigo con el mismo problema, así que os pongo un par de capturas para que veáis lo que me ocurre.

Son pruebas en un iphone pasandolo de vertical (320px) a horizontal (568px) y ocurre lo siguiente:

Así es como se ve al realizar el cambio
http://www.casimages.es/i/140505124611682056.png.html

Y cuando recargo la página es así como se visualiza (que es como se debería ver creo yo...)
http://www.casimages.es/i/140505124609273833.png.html

¿Alguna idea de por qué puede suceder esto?