Ich habe versucht zu verstehen, wie die Fensterbreite bestimmt wird und ich frage mich, ob das für CSS und jQuery anders ist.
Wenn ich zum Beispiel die CSS-Medienabfrage habe:
%Vor%und auch einige jQuery:
%Vor%Ich würde Folgendes erwarten: - Wenn der Browser die Größe ändert & amp; aktualisiert bei 980px, beide der oben genannten werden ignoriert - Wenn der Browser die Größe ändert & amp; Bei 978px aktualisiert, werden beide oben aktiviert.
Aber was ich finde, ist das - Die jQuery und CSS treten erst ab ca. 964px und darunter ein. - Manchmal (wenn window.resize aktiviert ist) treten jQuery und CSS in verschiedenen Breiten (einige Pixel auseinander) ein.
Kann jemand etwas Licht auf das werfen, was hier vor sich geht?
Übrigens basiere ich die Fensterbreite auf Firebugs Layout-Viewer.
Das Problem hängt mit der Breite der Bildlaufleiste zusammen: window.innerWidth gibt den richtigen Wert zurück, der von CSS-Medienabfragen gelesen wird. Beachten Sie, dass $(window).innerWidth() den falschen Wert zurückgibt.
Für eine Cross-Browser-Lösung kann eine Funktion wie diese verwendet werden:
%Vor% Ein bisschen abseits von Thema, aber ich nehme an, Sie versuchen zu imitieren, wenn das Javascript ausgelöst wird, weil Sie etwas gleichzeitig mit dem css Breakpoint-Schalter tun möchten. 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 element-x an deinem Breakpoint von position: relative auf position: fixed geht, kannst du sicherstellen, dass dein Javascript mit deiner CSS übereinstimmt, indem du
statt die Dokumentbreite abzurufen.
Medienabfragen verwenden die Breite des Darstellungsbereichs. Ich finde, dass die HTML-Breite viel genauer ist, wenn man versucht, mit CSS-Medienabfragen übereinzustimmen. Verwenden der Größenanpassung:
%Vor%Tags und Links jquery css media-queries