@media query & Firefox

chelix · #1 (**permalink**) 16/10/2014, 10:54

Buenas,

El problema que tengo hoy es que no logro hacer que me desaparezca la scroll bar horizontal para resoluciones de 1280. Si lo logre en Chrome pero al parecer Firefox y otros navegadores hacen caso omiso de mi codigo que es el siguiente:

<!DOCTYPE html>
....
....
<meta name="viewport" content="width=device-width" />
<style>
@media screen and (min-width:1200px) {body{overflow-x:hidden;}}
</style>
....
....

Alguna idea de porque no funciona en Firefox?

Desde ya gracias a todos.

chelix · #2 (**permalink**) 17/10/2014, 08:31

Después de investigar un poco más llegué a la conclusión de que el problema no es que se obvie la media query sino que el problema radica en el zoom con el que se visualiza la página.

Lo que sucede es lo siguiente, si la página se esta viendo en una pantalla que tiene un ancho (width) de al menos 1200 px con zoom al 100% o menor, se ejecuta la media query.

Ahora si se cambia el zoom a más de 100%, no se ejecuta.

Lo que deseo lograr es que se ejecute si o si siempre que la pantalla tenga al menos 1200px de ancho, sin importar el zoom. :\

pzin · #3 (**permalink**) 17/10/2014, 10:11

¿Para qué ocultar el contenido horizontal? No lo entiendo. ¿No será que no sabes de dónde viene que se te muestre el scroll?

Estás tapando un problema con otro.

chelix · #4 (**permalink**) 20/10/2014, 08:51

No oculto el contenido, solo no se quiere que aparezca la scroll bar cuando el ancho de la pantalla es de 1280px , o mejor dicho, cuando el ancho de la ventana del navegador (que es independiente de la resolucion de la pantalla (sistema)) sea de 1280px.

Por ejemplo, estamos usando una gran DIV que tiene por ancho 1280 px que son unos 75em aprox.

Si se esta viendo el sitio en una resolucion de 1280 x 720 con zoom al 100% no debe aparecer la horizontal scroll bar, ¿xq? Porque el ancho de la resolucion es igual al del DIV, y es totalmente innecesaria, sin embargo algunos navegadores como el Safari la muestran de cualquier manera. Eso es lo que se quiere evitar.

La media query q puse al principio es captada por Opera y Firefox sin problemas, pero no por IE, Safari y Chrome.

webosiris · #5 (**permalink**) 23/10/2014, 01:40

si te aparece scoll horizontal es porque dentro de ese div tienes algo más que mide más de 1280. También puede ser que no estás teniendo en cuenta el ancho del scroll vertical. la barra de scroll vertical también mide unos px, por lo que a una resolución de 1280 el ancho útil es menor que esos 1280px.

Es por eso que siempre se recomienda queel ancho los div contenedores se especifique en %, no en px, y que en todo caso se pongae l valor de px al max-width