Ich versuche herauszufinden, wie ich optional einen JavaScript-Block basierend auf der aktuellen Geräte- / Medienabfrage ausführen kann. Ich benutze Twitter Bootstrap und habe im Wesentlichen zwei Versionen von Medienabfragen:
%Vor%Ich habe eine Karte, die ich generiere, zeige sie aber nicht in der Mobile / Small-Screen-Version für undwidth-Gründe an. Das JavaScript wird jedoch immer noch im Hintergrund ausgeführt, obwohl Sie es auf dem mobilen Bildschirm nicht sehen können. Also versuche ich einen Weg in Javascript zu finden, wo ich etwas tun kann wie:
%Vor%Ich habe über Personen gelesen, die CSS-Eigenschaften auf bestimmte Werte in ihren Medienabfragen einstellen und dann versuchen, das Element im DOM basierend auf der CSS-Eigenschaft zu finden, aber es muss einen besseren Weg geben. Irgendwelche Ideen?
Die aktuell akzeptierte Antwort ist nicht gut genug. Sie sollten window.matchMedia
überprüfenSie können Änderungen an der Ansichtsfenstergröße erkennen, aber Sie müssen Faktoren wie Ausrichtung und Seitenverhältnisse berechnen, und es gibt keine Garantie, dass unsere Berechnung mit unseren Browserannahmen übereinstimmt, wenn Medienabfrageregeln angewendet werden.
Ich meine, Sie können X berechnen, aber Ihre Browserannahme kann Y sein. Also denke ich, ist besser, die gleichen Browserregeln zu verwenden, und window.matchMedia tut es
%Vor%Sie können sogar Abfragebenachrichtigungen mit einem Listener empfangen
%Vor%Wenn Sie keine Benachrichtigungen mehr über Änderungen erhalten müssen, rufen Sie einfach removeListener ()
auf %Vor%Sie können auch ein Plugin namens minwidth:
verwenden %Vor%Aber es funktioniert nur, wenn die Seite nicht beim Ändern der Größe geladen wird.
Tags und Links javascript css media-queries