swollavg swollavg - 7 months ago 66
HTML Question

Media Queries firing at wrong width

I am building a responsive page and the media queries are firing at the wrong width size. I am using Chrome.

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


For example, this rule works it just fires at wrong size. This rule fires at 1320px and not 1200px.
I have the meta tag for html in place. It seems to be firing the media query 100 or so pixel wider than it normall should.

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


I checked the previous responsive site I made and those breakpoints are firing correctly. I've tested the browser on different websites and the media queries are fine as well.

I found a similiar question on stack overflow but it went unanswered.

Media Queries breakpoint at wrong value

Not sure what the problem is?

Answer

A common reason this happens is if you have zoomed the browser window to a size other than 100%. In your browser, select the drop-down menu 'View' and make sure it is set to 100%. If you are zoomed in or out, it will trigger media-queries inappropriately.

And don't worry about feeling embarrassed. It has probably happened, or will happen to everyone.. but only once.


In order to avoid this issue all together, you should considering defining your media queries using a relative units (em or rem rather than px).


You can also enforce setting the browser zoom level to 100% on page load using 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;