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%; }

Answer 2

I just had the same Problem and found a solution, at least for me. I didn't test it a lot, so please let me know if there is something I didn't consider.

In the media query I set min-width of the body to the min-width of the media-query. It works!

@media only screen
and (min-width : 1060px) {
    body{
        min-width: 1060px;
    }
    #main-content{
        text-align: right;
        padding-left: 0;
    }
}

I made an example for this problem and solution here:

http://gehirnstroem.at/media-query.htm

http://gehirnstroem.at/media-query-solved.htm