Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

No se aplica la media query al girar el móvil

7 de febrero de 2014

Hola, tengo puesto unos media query, uno para móvil en vertical y otro para horizontal, en ellos cambio el tamaño de unos textos. Funcionar funciona, lo que ocurre es que al girar el móvil no se aplica el tamaño del texto a no ser que actualice la página.

Un saludo


Respuestas

#1

Lamentablemente este error es bastante habitual debido a la enorme variedad de dispositivos móviles y debido a las diferentes versiones de los navegadores de los usuarios. Para poder darte una respuesta, necesitaríamos tener más información sobre la página. Lo primero sería saber el valor de la etiqueta viweport que utilizas. Lo habitual para diseños responsive es lo siguiente:

<html>
    ...
    <meta name="viewport" content="width=device-width, initial-scale=1">

Si no te funciona ajustando bien la etiqueta viewport, indícanos por favor un pequeño ejemplo de los estilos y los puntos de ruptura de tu diseño.

@javiereguiluz

7 febrero 2014, 13:06
#2

Hola, no estoy usando ningún viewport, a mi jefe no le gusta el responsive y lo que estoy haciendo es que la web se vea igual que en un monitor, por eso quiero cambiar el tamaño de los texto para que sean más pequeños en el móvil y no se coma toda la pantalla una frase.

Las query que uso son estas:

@media only screen and (min-device-width: 320px) and (max-device-width: 479px) {}
@media only screen and (min-device-width: 480px) and (max-device-width: 640px) and (orientation: landscape) {}

Tampoco estoy seguro que sean las correctas, en mi móvil se ven pero pasa lo que te he dicho.

De este tema no se mucho ya que responsive no he podido mirar, he usado Bootstrap pero no me convence, y como te dije en otras preguntas, yo solo no doy a basto con todo y no puedo perfeccionar nada. Si quieres ver que uso exactamente esta es la sección de la web.

Pd: cuando me respondas quito el enlace.

@AlbertoVioque

7 febrero 2014, 13:56
#3

Estoy probando tu sitio en mi móvil y los puntos de ruptura sí que funcionan sin refrescar la página. Eso sí, cuando el móvil está en landscape veo el texto del elemento .subtitle en un tamaño diminuto (¡imposible de leer!) pero con el móvil en vertical el texto cambia de tamaño y se lee perfectamente.

Así que el único error que veo ahora mismo es que se está aplicando el tamaño de letra 14px cuando el móvil está en horizontal (y el texto no se lee), pero no se está aplicando el tamaño de letra 9px cuando el móvil está en vertical (y está genial que no se aplique porque así si que se puede leer bien el texto).

@javiereguiluz

7 febrero 2014, 15:34
#4

Hola, ya he corregido eso, pero me sigue pasando lo que te decía, al cargar la página en vertical por ejemplo, una vez cargada, giro el móvil en horizontal y no se actualiza el css para el horizontal, se queda con el de vertical, pero si recargo la web en horizontal me carga el horizontal, si hago el mismo proceso de horizontal a vertical hace lo mismo, no refresca y se queda con los tamaños que no son.

Gracias

@AlbertoVioque

10 febrero 2014, 14:39