Media Queries max-width launch at wrong width in Chrome

Question

Edit: More research says this is actually related to jQuery returns wrong width and height in Chrome 18.0.1025.168

I've set up some media queries as well as some javascript on a current wordpress theme project. In general they work fine, but (!) the media query:

@media only screen and (max-width: 980px)

Comes in to effect already at 1075px.

$(document).width()
1075
$("body").width()
1019.4444427490234

This happens in Chrome, but in safari it behaves like it's supposed to. I haven't checked any other browser.

Can you somehow destroy the queries proper "launch-widths" with javacript changing width of elements?

Css:

@media only screen and (max-width: 1060px){
.excerpt{
    width: 500px;
    float: left;
    font-size: 13px;
}
}
@media only screen and (max-width: 980px){
.hentry{
    height: auto;
}
.thumbnail,.excerpt{
    float: none;
    max-height: none;
}
p{
    font-size: 15px;
}
#site-description{
    display: none;
}
} 

Latest added javascript before this broke:

if($(window).width()<1065 || $(document).width()<1065){
    if($(document).width()>980){
        $(".excerpt").width($(".hentry").width()-515);
    } else{
        $(".excerpt").css("width","");
    }
}

Answer 1

Are you sure it has something to do with jQuery?

I had the same problem (media queries triggering at the wrong width) and here the cause was that my zoom-level in Chrome wasn't at 100%. I know, silly me.

Just press cmd+0 or ctr+0 to default to 100%.