iphone - todos - media query height

@media min-width no es reconocido por firefox 8

Question

He estado usando consultas de medios por primera vez, y las cosas van bien, pero parece que han encontrado un problema extraño.

aquí está mi css:

@media only screen and (min-width:481px) and (max-width:768px) { /* tablet portrait */
css here
}
@media only screen and (min-width:321px) and (max-width:480px) { /* mobile landscape */
css here
}
@media only screen and (max-width:320px){ /* mobile portrait */
css here
}

Todo funciona bien en Chrome, y las hojas de estilo se implementan como se esperaba. En Firefox, sin embargo, la última hoja de estilo (ancho máximo: 320px) no se recoge.

He hecho muchas búsquedas y no puedo encontrar nada similar.

Muy apreciado si alguien tiene algún consejo ...

Answer 1

Súper tarde aquí, pero solo cambia el

@media only screen and (max-width:320px){ /* mobile portrait */
css here
}

a

@media only screen and (max-width:768px){ /* mobile portrait */
css here
}

Por alguna razón, Firefox no reconocerá nada por debajo de 480px, por lo que si cambiamos 320px a 768px actuará como el valor predeterminado, mientras que las consultas más precisas lo anularán.

Editar: asegúrese de que el elemento dominante esté debajo del iphone en el CSS.

Answer 2

Solo para agregar mi experiencia a esto; Estaba teniendo el mismo problema, pero resultó que deshabilitar el complemento Firebug hizo que se comportara como debería. Estoy usando FF 15 (mac). Firebug 1.10.03

Sugiero deshabilitar todos los complementos al principio para ver si funcionan, luego volverlos a activar uno por uno.