jQueryとCSSのメディアクエリーが同期していない

Question

私はウィンドウの幅の決定方法を理解しようとしていましたが、CSSとjQueryで異なるかどうかは疑問でした。

例えば私は、CSSメディアクエリがある場合：

@media (max-width: 979px) { 
    /*my css here*/ 
} 

ともいくつかのjQuery：

if ($(window).width() < 979) { 
    //my jQuery here 
} 

を私は次のことを期待： - ブラウザが980pxで&リフレッシュリサイズされた場合上記の両方が無視されます - ブラウザのサイズを変更すると、&が978pxでリフレッシュされ、上記の両方が有効になります。

しかし、私が見つけたのは です - jQueryとCSSは約964px以下までキックオフしません。 - 時には（私はwindow.resizeが有効になっている）、jQueryとCSSが別々の幅（数ピクセル離れている）でキックしていることがあります。

ここで何が起こっているのか誰にも分かりますか？

ところで、私はFirebugのレイアウトビューアでウィンドウの幅を基準にしています。

Answer 1

あなたは

$(window).width(); // returns width of browser viewport 
$(document).width(); // returns width of HTML document 

http://api.jquery.com/width/

Answer 2

メディアクエリは、ビューポートの幅を使用する代わりに$(document).width()を使用したいかもしれないと思います。私は、CSSのメディアクエリと一致させようとすると、HTMLの幅を取得する方がはるかに正確であることがわかります。使用してサイズを変更：

$(window).resize(function() { 
    if ($('html').width() <= 979) { 
    // Do something 
    } 
}); 

Answer 3

問題は、スクロールバーの幅に関連している：window.innerWidthはCSSメディアクエリによって読み取られる正しい値を返します。 $(window).innerWidth()が間違った値を返すことに注意してください。クロスブラウザのソリューションについては

はこのような機能を使用することができます。

function viewport() { 
    var e = window, a = 'inner'; 
    if (!('innerWidth' in window)) { 
     a = 'client'; 
     e = document.documentElement || document.body; 
    } 
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; 
} 

var value = viewport().width; 

Answer 4

ビットトピックオフにしていますが、で何かをしたいので、私はあなたがする場合はJavaScript火災模倣しようとしていると仮定cssのブレークポイントが切り替わるのと同じ時間です。メディアクエリが発生したときにjavascriptに何かをさせたい場合は、メディアクエリの実行方法を模倣しようとするのではなく、CSSによって作成された変更をポーリングするのが最も簡単であることがわかりました（レポートのためにブラウザでは矛盾します）。スクロールバーの幅）。あなたのブレークポイントで、要素-xはposition: fixedへposition: relativeから行く場合たとえば、あなたはJavascriptをポーリングするのではなく、文書の幅を

if(elementX.css('position')== 'fixed'){ 
//code 
} 

をテストして、あなたのCSSに沿ったものであることを確認することができます。