html - Media Queries firing at wrong width

Question

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 1

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;