Ver Mensaje Individual
  #7 (permalink)  
Antiguo 18/11/2012, 09:21
Avatar de kahlito
kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años, 9 meses
Puntos: 65
Respuesta: Error al ver ancho de 240px con @media querys en css3

Cita:
Iniciado por memoadian Ver Mensaje
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.

Cita:
Iniciado por Adbane Ver Mensaje
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.