[SOLUCIONADO] No funcionan los mediaqueries

[huertas87]

¿Que más muchach@s, cómo van?

Bueno, mi duda esa la siguiente: Estoy desarrollando una página responsive, utilizo mediaqueries, en los navegadores de escritorio funciona correctamente, es decir la página se acopla según las resoluciones que indiqué en el .css, pero al momento de probarlo en un dispositivo móvil, no funciona! Y la verdad no lo entiendo.

De antemano agradezco sus respuestas o sugerencias.

Código CSS:

@media only screen and (max-width: 320px){
 
       /*Estilos para la resolución de 320*/
 
}
 

[pzin]

¿Lo tienes en línea o puedes aportar algo más de código?

[huertas87]

Gracias pzin por responder.

Claro, aquí está la dirección TUESTA . Si lo pruebas en un navegador(PC) veras que funciona correctamente, pero no en los navegadores móviles.

PDTA: En la linea 342 están los mediaqueries para la resolución de 320px linkCSS.

[comablck]

intenta asi..

@media screen and (max-width:320px) { ... }

[Tecna]

Buenas,

lo que ocurre es que los navegadores no declaran los pixeles reales, por ejemplo en un dispositivo con 320x480 px de tamaño de pantalla, en el navegador con javascript dice tener 800x600, por eso las condiciones del media querie no se cumplen y no se aplican las reglas. Tampoco javascript sería una solución porque los datos que arroja a veces son erroneos por ejemplo si se tiene desplegado el teclado, ese espacio no lo cuenta como disponible y parecería que la pantalla es más pequeña de lo que realmente es. Por eso yo sigo pensando que para las condiciones de media queries es mejor usar medidas lo más absolutas posibles, por ejemplo puntos. Sin embargo para el resto de medidas de la página lo ideal es usar medidas relativas y que el contenido fluya y se adapte por si solo.

He estado ojeando tu código y he visto cosas que me han llamado la atención, como por ejemplo que haya elementos de 1024 px de ancho en la version para 320px y posiciones y márgenes negativos de hasta 600px y tamaños de letra de 10 y 15px. Todo eso no creo que sea muy adecuado para pantallas reducidas. Yo diría que más bien la idea es lo contrario, en las versiones para pantalla pequeña ampliar la letra, no reducirla, teniendo siempre en mente la accesibilidad. Y no cargar una imagen grande para luego escalarla porque así no se ahorran recursos, más bien cargar una imagen menor de entrada y si hace falta cargar otra mayor. Y por supuesto usar medidas relativas excepto para las media queries que si el diseño se adapta bien no tendrían que retocar más que un par de cosas.

[pzin]

Lo que ocurre es que no has declarado ningún meta-viewport.

[huertas87]

Gracias pzin, comablck y Tecna por responder.

Bueno, he solucionado el problema, que fue el que me hizo caer en cuenta pzin, incluí el meta-viewport y funcionó correctamente. Gracias a los dos, fueron de gran ayuda. Tecna seguiré tus sugerencias.

Gracias.