Media Queries in JavaScript mittels matchMedia verwenden!

In diesem Artikel erkläre ich dir, wie du das Pendant zur Media Querie in CSS, sehr einfach in JavaScript umsetzen kannst. Dabei ist es möglich, je nach Bildschirmbreite oder -höhe, unterschiedliche CSS Eigenschaften festzulegen.

In JavaScript sollen häufig Funktionen bei einer bestimmten Größe abgerufen werden, um zum Beispiel Bilder zu ändern, einen Slider nur auf Desktop Geräten zu initialisieren oder zusätzlichen JavaScript-Code für eine mobile Navigation zu aktivieren.

Kurzer Exkurs: CSS Media Queries

Für die unter euch, die keine oder nur sehr wenig Erfahrung mit CSS haben, möchte ich ein kleines Beispiel geben, wie man CSS Media Queries verwendet. Die Media Queries können genutzt werden, um die Geräteorientierung (Hochformat, Querformat), Breiten und Höhen, Kontrast Modus, Dark Mode und vieles weitere zu erkennen.

Wir schauen uns nun ein Beispiel an. Bei einem Gerät mit nur einem Display und einer Breite von 700px bis 1000px, soll die Hintergrundfarbe rot werden.

Als Alternative zum Typ "Screen" gibt es beispielsweise auch den Typ "Print" für den Fall, dass man eine Webseite ausdrucken möchte.

@media only screen and (min-width:700px) (max-width:1000px){
    body {
        background: red; 
    }
}

Wie kannst du die matchMedia Funktion verwenden?

Die matchMedia Funktion in JavaScript bietet uns die gleichen Möglichkeiten, die wir auch schon in CSS verwenden können.

Ohne eine matchMedia Funktion in JavaScript müsstest du die Bildschirmbreiten selbständig abfragen und dann entsprechend prüfen. Diese Arbeit wird dir abgenommen, da du mit Media Querie Strings arbeiten kannst.

Die Funktion matchMedia erwartet nur einen Parameter mit einem String, der ein sogenannter "Media Querie String" sein muss! Dieser hat eine Property matches von diesem bekommst du ein True oder False zurück, je nachdem ob dein "Media Querie String" den Regeln entspricht oder eben nicht.

Im folgenden JavaScript-Code Beispiel siehst du die Verwendung der matchMedia Funktion. Dort wird geprüft, ob der Viewport eine Breite von 900px oder kleiner hat.

const pElement = document.querySelector('p');
const matchMediaQuerie = window.matchMedia('(max-width: 900px)');

if (e.matches) {
    pElement.textContent = 'Das Geräte ist nicht Breiter als 900px!';
        pElement.parentElement.style.backgroundColor = '#ef4136';
} else {
    pElement.textContent = 'Das Geräte ist Breiter als 900px!';
        pElement.parentElement.style.backgroundColor = '#5f4bb6';
}

Um Änderungen des Viewports zu erkennen, die zum Beispiel beim Drehen eines Tablets oder Smartphones auftreten, benötigen wir noch einen Listener.

Hinzufügen eines Listeners, um eine Veränderung zu erkennen!

Ein Listener (dt. Zuhörer) ist dazu da darauf zu hören, wenn Veränderungen wie ein Update des Werts einer Variable oder die Breite des Viewports sich verändern. Als JavaScript-Entwickler wird dir die Variante addEventListener geläufiger sein als die, eher selten verwendete, addListener Methode, die nachfolgend zur Anwendung kommt.

Wenn wir einen Listener hinzufügen wollen, benötigen wir immer eine Callback-Funktion (dt. Rückruf-Funktion). Diese wird aufgerufen, sobald der Listener uns meldet, dass eine Veränderung eingetreten ist.

Dazu definieren wir uns eine Funktion mit dem Namen showDevice. Man kann für so einen Listener auch eine anonyme Funktion verwenden, allerdings hat dies den Nachteil, dass diese an einer anderen Stelle nicht noch einmal aufgerufen werden kann. Unser Aufruf, den wir jetzt auf das Objekt, was wir von matchMedia bekommen, anwenden hat folgenden Aufbau matchMediaQuery.addListener(showDevice); . Durch diesen haben wir nun unsere Callback-Funktion auf unser Objekt gebunden.

Zusätzlich dazu rufen wir die Funktion showDevice noch einmal auf und übergeben das Objekt von matchMedia. Um bei der Initialisierung unserer Webseite schon einmal zu prüfen, ob unsere Bedingung zutrifft, da ein Listener erst bei einer Veränderung ausgeführt wird.

const pElement = document.querySelector('p');
const matchMediaQuerie = window.matchMedia('(max-width: 900px)');

function showDevice(e) {
  if (e.matches) {
    pElement.textContent = 'Das Geräte ist nicht Breiter als 900px!';
    pElement.parentElement.style.backgroundColor = '#ef4136';
  } else {
    pElement.textContent = 'Das Geräte ist Breiter als 900px!';
    pElement.parentElement.style.backgroundColor = '#5f4bb6';
  }
}

matchMediaQuerie.addListener(showDevice);
showDevice(matchMediaQuerie);

Live Demo für eine Verwendung von matchMedia

Abschließend will ich dir noch einmal ein Beispiel zeigen, wie unser ganzer Code aus dem vorherigen Beispiel in einer Live-Demo aussehen würde. Öffne das Fenster zum Beispiel mal in Groß und ziehe es hin und her, du wirst direkt eine Veränderung bemerken.

Match Media kann auch Dark Mode und Co. abfragen!

Neben den Standards von Breite und Höhe kannst du auch andere Eigenschaften abfragen, dazu gehört alles, was du auch mittels CSS Media Queries abfragen kannst.

Ich habe für dich noch mal ein kleines Beispiel vorbereitet für die Erkennung, ob ein Nutzer den Dark Mode seines Betriebssystems/Browser aktiviert hat. In dem JavaScript-Code wird dann entsprechende die Hintergrundfarbe verändert. Um die Veränderung zu erkennen, benutzen wir die Option prefers-color-scheme, die du auch in CSS verwenden kannst.

const matchMediaQuerieDarkMode = window.matchMedia('(prefers-color-scheme: dark)');

function onDarkModeChange(e){
  if(e.matches){
    document.body.style.backgroundColor = '#292929';
  }else{
    document.body.style.backgroundColor = '#ffffff';
  }
}

matchMediaQuerieDarkMode.addListener(onDarkModeChange);
onDarkModeChange(matchMediaQuerieDarkMode);

Falls du mehr zum Thema Dark Mode in CSS wissen willst, schau dir meinen Artikel "Media Queries - Den Dark Mode per CSS ansteuern" an!

Fazit

Um eine Media Querie in JavaScript zu verwenden braucht es keine aufwendigen Berechnungen oder Prüfungen, ob etwas aktuell der Fall ist oder nicht. Es reicht die⁣ Methode matchMedia für eine elegante, schöne und kurze Lösung!