Error al ver ancho de 240px con @media querys en css3

[kahlito]

Hola.

Estoy intentando hacer un diseño para varias resoluciones y plataformas incluyendo el ancho de 240px sin embargo este no baja a dicho tamaño, es decir no lee dicha orden cuando le pongo su media query de la siguiente manera:

Código CSS:

@media(max-width: 319px) and (min-width: 240px){    
    .contenedor, header{                
        width: 220px;
        margin: 0 auto;     
    }
}
 

También lo pongo así y tampoco me coge dicho ancho:

Código CSS:

@media only screen and (min-width: 240px){
contenedor, header{             
        width: 220px;
        margin: 0 auto;     
    }
}
 

El resto de resoluciones me salen perfectamente como por ejemplo en esta:

Código CSS:

@media(max-width: 480px){
contenedor, header{             
        width: 460px;
        margin: 0 auto;     
    }
}
 

Sin embargo al verlo en test/examinadores de algunas webs de dichos tamaños no logro que baje a 240px de ancho de las dos anteriores formas, ¿que estoy haciendo mal?

Por otro lado al ir haciendo pruebas con el navegador, por ejemplo con Firefox u Chrome al bajar a 320px no se ve el cambio correcto si muevo el navegador a un ancho mínimo para hacer pruebas, creo que en 329px ya no hace caso... pero al verlo en un examinador o en un móvil de 320px de ancho se ve que está correcto pero en el navegador no sigue esa orden... ¿tiene un mínimo de ancho por defecto cada navegador como mozilla o Chrome? La verdad es algo que no sabía y no entiendo.

Saludos

[Adbane]

Si usas Chrome o Firefox, descargate "Web Developer" en sus correspondientes tiendas de Extensiones. Una vez instalado, vas a "Resize -> Responsive Layouts" y allí puedes ver los distintos resultados en distintos tamaños, e incluso con la opción "Edit resize layouts" puedes modificarlas, o añadir tus propias medidas.

Por otro lado, con el código, prueba así:

Código CSS:

@media screen and (max-width: 240px){   
        .contenedor, header{               
            width: 220px;
            margin: 0 auto;    
        }
    }
 

[memoadian]

no sé muy bien por que no te sirve, pero

@media(max-width: 319px) and (min-width: 240px){
//aparece si la pantalla esta entre 319px y 240px
}

@media (max-width:240px) {
//aparecería todo si la pantalla es menor a 240px
}

[kahlito]

Iniciado por Adbane

Si usas Chrome o Firefox, descargate "Web Developer" en sus correspondientes tiendas de Extensiones. Una vez instalado, vas a "Resize -> Responsive Layouts" y allí puedes ver los distintos resultados en distintos tamaños, e incluso con la opción "Edit resize layouts" puedes modificarlas, o añadir tus propias medidas.

Por otro lado, con el código, prueba así:

Código CSS:

@media screen and (max-width: 240px){   
        .contenedor, header{               
            width: 220px;
            margin: 0 auto;    
        }
    }
 

Hola Adbane, tengo instalado en Firefox Web Developer y ahi tengo preparadas varias medias para hacer mi propio resize etc, etc y ahi es donde lo veo, lo que no me había fijado es en la última opción del menú Responsive Layouts, gracias muy buena.

Iniciado por memoadian

no sé muy bien por que no te sirve, pero

@media(max-width: 319px) and (min-width: 240px){
//aparece si la pantalla esta entre 319px y 240px
}

@media (max-width:240px) {
//aparecería todo si la pantalla es menor a 240px
}

He probado varias opciones y parece que con esta última (@media (max-width:240px)) si aparece en Firefox a 240px , sin embargo al verlo en los test online examinadores no se ve a dicho tamaño y se descuadra:

Suelo probarlo en estos tres:

http://mattkersley.com/responsive/
http://www.responsinator.com/
http://quirktools.com/screenfly/

Aun así voy a seguir probando y haciendo cambios a ver si en todos a la vez sale bien a 240px y asi ver si es fallo de alguno de estos examinadores o sigue siendo fallo mio.

Gracias por vuestra ayuda.

[memoadian]

yo uso testsize, pero de todos modos, solo funciona si tu navegador soporta mediaqueries.

igual solo necesitas usar ctrl + para saber como se va acomodando en los navegadores.

[Adbane]

Me he fijado en los 3 códigos de ejemplo que has puesto que "contenedor" tiene un punto en los dos ultimos y en el primero si, aunque eso es de poca importancia xD

Por otro lado, te comento una peculiaridad sobre los 240px de ancho, yo tengo un LG Optimus L3 que precisamente tiene 240px de ancho, para testear los media queries, no uso tests de otras páginas, y el Web Developer apenas lo uso para eso, ya que con hacer pequeña la ventana del navegador es más que suficiente. Ahora bien, creo que los 240px no los interpreta bien cualquier testeador, ni si quiera Web Developer, pues estuve mirando con este la página de Awwwards a 240px de ancho, en cambio en mi teléfono se ve bien. Si pruebas en el test de mattkersley la página de Awwwards, verás que a 240px de ancho el boton que abre el menú se sobrepone por encima del logo, mientras que en mi teléfono se ve así:

http://img138.imageshack.us/img138/3...2111613403.png

Te aconsejo que dejes de lado los test que ofrecen, ya que no pueden asegurarte fiabilidad al 100%, redimensiona el tamaño de la ventana del navegador, no hace falta saber las proporciones, simplemente observa como se comporta la página al redimensionar para saber que parte de las media queries se están ejecutando, y por último lugar, si tienes algún teléfono, tableta, o cualquier dispositivo con Wi-Fi y que corra bajo iOS o Android (si es de 240px de ancho, mejor para ti :D), te aconsejo que te instales Adobe Edge Inspect, un programa de inspeccion remota, todo lo que se ve en tu navegador, se ve al mismo tiempo en tu otro dispositivo en su tamaño exacto y en tiempo real, y no te preocupes, no es engorroso de usar, facilito, además freemium, lo que significa que es gratis, claro que solo te permitirá conectar un dispositivo, si pagas, todos los que quieras.

A mi no me funciona, pero eso es por culpa de mi cortafuegos xD Pero igualmente recomendable 100%.

Un video, por si te interesa:
http://www.youtube.com/watch?v=SyzZHS-1fPE

[kahlito]

Iniciado por memoadian

yo uso testsize, pero de todos modos, solo funciona si tu navegador soporta mediaqueries.

igual solo necesitas usar ctrl + para saber como se va acomodando en los navegadores.

Gracias de nuevo, lo anoto en mis favoritos.

Iniciado por Adbane

Me he fijado en los 3 códigos de ejemplo que has puesto que "contenedor" tiene un punto en los dos ultimos y en el primero si, aunque eso es de poca importancia xD

Por otro lado, te comento una peculiaridad sobre los 240px de ancho, yo tengo un LG Optimus L3 que precisamente tiene 240px de ancho, para testear los media queries, no uso tests de otras páginas, y el Web Developer apenas lo uso para eso, ya que con hacer pequeña la ventana del navegador es más que suficiente. Ahora bien, creo que los 240px no los interpreta bien cualquier testeador, ni si quiera Web Developer, pues estuve mirando con este la página de Awwwards a 240px de ancho, en cambio en mi teléfono se ve bien. Si pruebas en el test de mattkersley la página de Awwwards, verás que a 240px de ancho el boton que abre el menú se sobrepone por encima del logo, mientras que en mi teléfono se ve así:

http://img138.imageshack.us/img138/3...2111613403.png

Te aconsejo que dejes de lado los test que ofrecen, ya que no pueden asegurarte fiabilidad al 100%, redimensiona el tamaño de la ventana del navegador, no hace falta saber las proporciones, simplemente observa como se comporta la página al redimensionar para saber que parte de las media queries se están ejecutando, y por último lugar, si tienes algún teléfono, tableta, o cualquier dispositivo con Wi-Fi y que corra bajo iOS o Android (si es de 240px de ancho, mejor para ti :D), te aconsejo que te instales Adobe Edge Inspect, un programa de inspeccion remota, todo lo que se ve en tu navegador, se ve al mismo tiempo en tu otro dispositivo en su tamaño exacto y en tiempo real, y no te preocupes, no es engorroso de usar, facilito, además freemium, lo que significa que es gratis, claro que solo te permitirá conectar un dispositivo, si pagas, todos los que quieras.

A mi no me funciona, pero eso es por culpa de mi cortafuegos xD Pero igualmente recomendable 100%.

Un video, por si te interesa:
http://www.youtube.com/watch?v=SyzZHS-1fPE

He probado en uno de los test a ver loa web de Awwwards y se ve como dices con el logo superpuesto y no como la imagen que se ve en tu móvil, así que seguiré tus consejos de no fiarme mucho en esa prueba de 240px en los examinadores. Lo de instalar Adobe Edge Inspect no puedo ya que por ahora no tengo ninguno de esos móviles, así que me toca esperar.

Muchas gracias por vuestra ayuda, saludos.