Media Queries min-width not firing correctly in Opera, FF and IE

Question

I use media queries on a page http://test.lovecpokladu.cz/detail-mince?id=2461 like this:

@media all and (min-width: 660px) {
    ... styles for box decoration ...
}

and use this meta viewport tag:

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

When I resize Chrome's window to 660px (measuring just the HTML page, not window borders), styles apply correctly. Styles don't apply in 659px, which is correct.

Problem is with Opera, IE and Firefox. The styles apply as soons as width hits about 642px :( I observe these browsers firing min-width sooner at more content even in max-width condition and even on another website (built by me).

Where could be the problem?

Thanks a lot!

Answer 1

Problem in width of scrollbar in BODY or HTML - it about 16-18px.

What to do?

1. Bad solution - set to BODY or HTML overflow-y: scroll.
2. Experimental solution - try to move scrollbar from BODY or HTML to first wrapper DIV.

Like so:

body, html { overflow: hidden; height: 100%; }
div.wrapper { overflow: auto; height: 100%; }