div - img html title

Consultas de medios que disparan a un ancho incorrecto

Question

Estoy construyendo una página sensible y las consultas de medios están disparando con el tamaño de ancho incorrecto. Estoy usando Chrome.

@media screen and (max-width: 1200px) {
 .logo-pic {
    display: none;
}
}

Por ejemplo, esta regla funciona, simplemente dispara a un tamaño incorrecto. Esta regla dispara a 1320px y no a 1200px. Tengo la metaetiqueta para html en su lugar. Parece que está disparando la consulta de medios 100 pixeles más de lo que normalmente debería.

<meta name="viewport" content="width=device-width, initial-scale=1">

Revisé el sitio sensible anterior que hice y esos puntos de interrupción se activan correctamente. He probado el navegador en diferentes sitios web y las consultas en los medios también están bien.

Encontré una pregunta similar sobre el desbordamiento de la pila, pero no recibió respuesta.

Media consulta punto de interrupción en el valor incorrecto

¿No estoy seguro de cual es el problema?

Answer 1

¿Tiene iframes (o modales o ventanas más pequeñas) cargando la misma hoja de CSS con su consulta de medios? Si es el caso, es un problema de caché, y necesita vincular el archivo CSS con un param tonto como:

<link href="myCss.css?iframe=1" />

Para cargar el archivo css como un archivo nuevo en lugar de tomar la versión en caché ... Espero que esté claro :)

Answer 2

Solo una pequeña adición, para evitar que otros sigan buscando aunque la respuesta se da aquí.

Mi zoom ya estaba configurado al 100%, y aún así el problema estaba allí. Si experimenta lo mismo, la respuesta es simple: configure su zoom en 90% y vuelva al 100%, et voila, puntos de corte en el ancho que desee.

Answer 3

Una razón común por la que esto sucede es si ha aumentado la ventana del navegador a un tamaño distinto al 100%. En su navegador, seleccione el menú desplegable ''Ver'' y asegúrese de que esté configurado al 100%. Si te acercas o alejas, activará las consultas de los medios de forma inapropiada.

Y no te preocupes por sentirte avergonzado. Probablemente ha sucedido, o le pasará a todos ... pero solo una vez.

Para evitar este problema todos juntos, debe considerar definir sus consultas de medios usando unidades relativas ( em o rem lugar de px ).

También puede aplicar la configuración del nivel de zoom del navegador al 100% en la carga de la página mediante javascript.

document.body.style.webkitTransform =  ''scale(1)'';
document.body.style.msTransform =   ''scale(100)'';
document.body.style.transform = ''scale(1)'';
document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;

Answer 4

Eche un vistazo a sus unidades: rem , em , px .

Acabo de tener este problema y fue porque mi tamaño de fuente base es 10px y puse max_width: 102.4rem en la consulta de medios, pero se está activando a alrededor de 1600px en lugar de 1024px.

Todavía se activa a 1600px en la mía con 102.4em , pero funciona como se esperaba cuando uso 1024px .

Aquí hay un artículo que habla sobre todo lo que estoy insinuando:

https://zellwk.com/blog/media-query-units/

Al principio, me perdí la respuesta más votada porque experimenté el problema al usar rem no px . Claramente, la raíz del problema parece ser las unidades.