jQuery und CSS Medienabfragen nicht synchron

Question

Ich habe versucht zu verstehen, wie Fensterbreite bestimmt wird und ich frage mich, ob es für CSS und jQuery anders ist.

Wenn zum Beispiel habe ich die CSS-Medienabfrage:

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

und auch einige jQuery:

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

Ich würde erwarten, dass die folgenden: - Wenn der Browser & aktualisiert am 980px Größe geändert wird , beide der oben genannten werden ignoriert - Wenn die Größe des Browsers geändert wird & bei 978px aktualisiert, werden beide der oben genannten aktiviert.

Aber was ich finde, ist, dass - Die jQuery und CSS treten nicht in bis etwa 964px und darunter. - Manchmal (wenn window.resize aktiviert ist) treten jQuery und CSS in verschiedenen Breiten (einige Pixel auseinander) ein.

Kann jemand Licht auf das werfen, was hier vor sich geht?

Übrigens basiere ich die Fensterbreite auf Firebugs Layout-Viewer.

Answer 1

Denken Sie vielleicht $(document).width() statt

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

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

Answer 2

Media Queries die Darstellungsbreite verwenden verwenden. Ich finde, dass die HTML-Breite viel genauer ist, wenn man versucht, mit CSS-Medienabfragen übereinzustimmen. Mit Größe ändern:

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

Answer 3

Das Problem mit der Scrollbar Breite verwendet ist: window.innerWidth wird den richtigen Wert zurückzugeben, die durch CSS-Medienabfragen gelesen wird. Beachten Sie, dass $(window).innerWidth() den falschen Wert zurückgibt.

off topic

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

Ein bisschen, aber ich nehme an, Sie versuchen, die Javascript Feuer zu imitieren, wenn, weil Sie etwas tun wollen an:

Für eine Cross-Browser-Lösung kann eine Funktion wie diese verwendet werden, gleichzeitig mit dem css-Breakpoint. Wenn Sie möchten, dass JavaScript beim Abrufen der Medienabfrage etwas unternimmt, habe ich festgestellt, dass es am einfachsten ist, eine von css erstellte Änderung abzufragen, anstatt zu versuchen, die Art und Weise zu simulieren, wie Medienabfragen ausgelöst werden (was in Browsern aufgrund von Berichten inkonsistent ist) der Bildlaufleistenbreiten). Zum Beispiel, wenn an Ihrem Haltepunkt, Element-x position: relative-position: fixed geht, können Sie Ihr Javascript gewährleisten im Einklang mit Ihrer CSS ist von

Testen

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

anstatter Abfrage der Dokumentbreite.