Media Queries max-width runs wrong width in Chrome

Question

Edit: more research says this is really due to jQuery returning incorrect width and height in Chrome 18.0.1025.168

I created some media queries as well as some javascript in the current wordpress theme project. In general, they work fine, but (!) Media request:

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

Effective already at 1075px.

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

This happens in Chrome, but in safari it behaves as intended. I have not tested any other browser yet.

Can you somehow destroy the correct "starting widths" of requests with changing the width of javacript 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; } } 

The last javascript added 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 this has something to do with jQuery?

I had the same problem (media requests with the wrong width), and here the reason is because my zoom level in Chrome was not 100%. I know, stupid.

Just hit cmd + 0 or ctr + 0 by default at 100%.