Media Queries max-width launch at wrong width in Chrome

google-chrome, jquery, media-queries

Solution

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%.

Problem

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",""); } } ```

Original source