Navegador ardroid no detecta css version movil

[franjgg]

Hola amigos vereis,

He creado una version movil de una web mediente dos hojas de estilo:

<link rel="stylesheet" media="screen and (max-width:2480px)" href="css/style.css">
<link media="only screen and (max-device-width: 640px)" href="CSS/movil.css" type="text/css" rel="stylesheet" />

La cosa es que si desde el movil entro con chrome si la detecta pero el navegador por defecto que trae android no lo detecta y carga la version del css para escritorio.

A ver si alguien sabe como puede estar pasando esto y alguna posible solucion.

Un saludo

[pzin]

Pues Android soporta perfectamente las media-queries: http://caniuse.com/css-mediaqueries

¿Cuál es el ancho del navegador con el que estás probando? A ver si va a ir por ahí la cosa.
¿Probaste con max-width en lugar de max-device-width?

[franjgg]

Hola pzin gracias por tu atencion,

Acabo de modificar el valor de max-width pero sigue sin tomar el css para movil,

Como puedo saber el ancho del navegador?

[pzin]

Mira a ver si anda en esta lista el dispositivo con Android que estés usando: http://i-skool.co.uk/mobile-developm...iewport-sizes/

[franjgg]

Si es el SIII "640"

La cosa es que he mirado tambien desde un Galaxy ace y tampoco muestra la version movil, pero si entras con chrome si

Es raro no se que puede ser

Gracias amigo

[pzin]

¿Y el viewport lo tienes definido que se ajuste al ancho de la pantalla?

[franjgg]

umm,

Creo que no tengo definido el viewport

Como deberia de hacerlo asi "<meta name="viewport" content="width=640" />"

Un saludo amigo

[pzin]

Pues será ese el problema pues. Para el hacer un diseño responsivo tienes que indicar que el área visible sea igual al ancho del navegador/dispotivo.

Código HTML:

<meta name="viewport" content="width=device-width">
 

Usas device-width para que sea dinámico para cualquier dispositivo.

[franjgg]

He incluido tal que asi y sigue sin verse

"<meta name="viewport" content="width=640" />"



Un saludo amigo

[pzin]

¿Tienes el sitio subido a algún sitio para verlo in situ?

[franjgg]

Si esta es la direccion:

dondelocompro.es/shoppingnight

Un saludo

[pzin]

Yo sólo veo el tamaño del viewport especificado dentro de un comentario. Tendrás que ponerlo fuera porque así el navegador lo ignora directamente.

[franjgg]

Hola de nuevo amigo,

He comentado el viewport por que seguia sin funcionar y ademas estaba haciendo en chrome que antes si se veia bien que se viese mucho mas grande

Pero sigue sin funcionar en android

[franjgg]

He visto que en algunos sitios lo hacen con javascritp

[pzin]

Miro yo no puedo pruebas an Android, no soy de la resistencia.

Pero el viewport tienes que ponerlo si o si. Y lo suyo es ponerlo como te puse, con el device-width.

No sé si habrá algún problema con el soporte para las media-queries como atributo de link, pero no creo porque es un atributo muy muy viejo y dudo mucho que el problema venga por ahí.

[NUCKLEAR]

Debes poner en el header
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Y sacar esos scripts, luego usar los media queries correspondientes en el css:

Ejemplo el css solo sera "activo" si la medida de la pantalla es menor a 768 y mayor a 480px

@media only screen and (min-width: 480px) and (max-width: 768px) {
----el css aca----
}

Busca un poco sobre media queries.