Manchmal ist das Layout bereits fertig, CSS Media Queries sind eingerichtet, aber Sie müssen ein bestimmtes Verhalten an einem Breakpoint direkt in JavaScript erkennen. Ein Popup nur auf mobilen Geräten anzeigen, ein Grid bei Größenänderung umbauen, eine Animation auslösen, wenn der Bildschirm „schmal" ist: All das setzt voraus, dass das Skript die aktuelle Fensterbreite kennt.

Das Problem: Entwickler nehmen oft den umständlichen Weg, sie werten window.innerWidth aus, drosseln das Resize-Event mit Throttle, vergleichen mit magischen Zahlen und erhalten fragilen Code, der getrennt von den CSS-Breakpoints lebt. Dabei bietet der Browser seit Langem eine Methode, die mit denselben Media-Ausdrücken arbeitet wie CSS.

Nachfolgend drei praxistaugliche Ansätze: vom modernen matchMedia (funktioniert wie @media in CSS) bis zu einer jQuery-Variante für Bestandsprojekte. Mit Live-Beispielen, die Sie direkt kopieren und ausführen können.

💡 Kurzüberblick:

• matchMedia: eine native Methode, die einen CSS-Media-Ausdruck entgegennimmt und meldet, ob dieser aktuell zutrifft; ideal, um JS-Logik mit CSS-Breakpoints zu synchronisieren
• resize + matchMedia: eine Kombination, die auf Änderungen des Browserfensters reagiert; das Skript erfährt sofort vom Überschreiten eines Breakpoints, ohne periodisch innerWidth abzufragen
• jQuery-Variante: für Projekte, in denen jQuery bereits auf der Seite eingebunden ist; dasselbe resize, jedoch ohne natives matchMedia; der Vergleich erfolgt über $(window).width()

MatchMedia: die einzige verlässliche Quelle für die Bildschirmbreite

Der Hauptnachteil von window.innerWidth ist, dass es nichts über Ihre CSS-Breakpoints weiß. Sie setzen 768px in Media Queries, schreiben dann if (window.innerWidth < 768) im JS, und irgendwann zerstören Rundungsfehler oder die Scrollleiste die Synchronisation.

window.matchMedia() löst dieses Problem radikal: Es akzeptiert denselben Media-Ausdruck-String wie die CSS-@media-Regel. Das Ergebnis ist ein MediaQueryList-Objekt mit einer .matches-Eigenschaft (true / false). Keine magischen Zahlen, keine Abweichung vom Layout.

Grundlegende Syntax:

1
const mq = window.matchMedia("(min-width: 768px)");
2
 
3
if (mq.matches) {
4
  console.log("Tablet or wider — 768px+");
5
} else {
6
  console.log("Mobile resolution — less than 768px");
7
}

Derselbe Aufruf matchMedia("(min-width: 768px)") wird vom Browser nach denselben Regeln ausgewertet wie @media (min-width: 768px) in CSS. Wenn die Seitenleiste an diesem Breakpoint per CSS ausgeblendet wird, „sieht" JS dasselbe und kann beispielsweise das Mobilmenü ausblenden.

Neben .matches bietet das MediaQueryList-Objekt eine .media-Eigenschaft (der ursprüngliche Abfragestring) und eine addEventListener-Methode, um Änderungen zu abonnieren. Das bedeutet: Sobald Sie einen Breakpoint in einer Konfiguration festlegen, können Sie ihn sowohl in CSS als auch in JS nutzen, ohne magische Zahlen zu duplizieren, extrahieren Sie einfach 768 in eine Konstante und setzen Sie sie an beiden Stellen ein.

Auf Größenänderungen reagieren ohne Throttle und Workarounds

Nur „jetzt prüfen" ist die halbe Miete. Die eigentliche Magie beginnt, wenn das Skript vom Überschreiten eines Breakpoints genau in dem Moment erfährt, in dem sich das Fenster ändert.

MediaQueryList besitzt ein change-Event, das exakt dann feuert, wenn der .matches-Wert umschaltet. Nicht bei jedem Pixel einer Größenänderung, sondern nur beim Überschreiten der Grenze:

1
const mq = window.matchMedia("(min-width: 500px)");
2
 
3
mq.addEventListener("change", function (e) {
4
  if (e.matches) {
5
    console.log("Screen expanded to 500px or more");
6
  } else {
7
    console.log("Screen narrowed to less than 500px");
8
  }
9
});

Für die Abwärtskompatibilität mit älteren Browsern erreichen Sie dasselbe Ergebnis über einen allgemeinen resize-Handler auf window:

1
window.addEventListener("resize", function () {
2
  if (window.matchMedia("(min-width: 500px)").matches) {
3
    console.log("Screen width — at least 500px");
4
  } else {
5
    console.log("Less than 500px");
6
  }
7
});

Der Unterschied ist einfach: change auf MediaQueryList ist ein ereignisgesteuerter Ansatz (keine überflüssigen Aufrufe während der Größenänderung innerhalb eines Bereichs), während resize auf window ein Fallback ist, der jedem Entwickler vertraut ist.

Breitenbereich: zwischen zwei Breakpoints

Eine häufige Aufgabe ist „von 769px bis 1024px". Auch hier funktioniert matchMedia wie CSS: Kombinieren Sie min-width und max-width in einem einzigen Ausdruck:

1
window.addEventListener("resize", function () {
2
  if (
3
    window.matchMedia("(min-width: 769px)").matches &&
4
    window.matchMedia("(max-width: 1024px)").matches
5
  ) {
6
    console.log("Tablet range: 769px – 1024px");
7
  } else {
8
    console.log("Outside the tablet range");
9
  }
10
});

Oder als einzelner Ausdruck (Browser verstehen kombinierte Media Queries genauso wie in CSS):

1
const tablet = window.matchMedia("(min-width: 769px) and (max-width: 1024px)");
2
 
3
tablet.addEventListener("change", function (e) {
4
  console.log(e.matches ? "Entered tablet range" : "Left tablet range");
5
});

Welche Variante wählen? change auf MediaQueryList, wenn Sie den exakten Moment des Grenzübertritts abfangen müssen (etwa um den DOM-Baum umzubauen). resize + matchMedia, wenn die Logik einfacher ist und Sie nur „jetzt prüfen" müssen, ohne künftige Übergänge zu abonnieren.

JQuery-Variante: wenn matchMedia nicht verfügbar ist

Nutzt das Projekt jQuery und Polyfills sind keine Option, erreichen Sie dasselbe Ergebnis durch den Vergleich von $(window).width() mit einem Schwellenwert:

1
jQuery(document).ready(function ($) {
2
  if ($(window).width() > 1000) {
3
    console.log("Screen width greater than 1000px");
4
  } else {
5
    console.log("Screen width 1000px or less");
6
  }
7
});

Dieser Code läuft einmal beim Seitenaufruf. Um Größenänderungen zu verfolgen, verpacken Sie die Prüfung in einen Handler:

1
jQuery(document).ready(function ($) {
2
  function checkWidth() {
3
    if ($(window).width() > 1000) {
4
      console.log("Width > 1000px");
5
    } else {
6
      console.log("Width ≤ 1000px");
7
    }
8
  }
9
 
10
  checkWidth(); // initial run
11
  $(window).on("resize", checkWidth);
12
});

Aber bedenken Sie: $(window).width() und matchMedia können sich wegen der Scrollleiste um einige Pixel unterscheiden. matchMedia arbeitet mit dem Viewport, genau wie CSS-Regeln. Deshalb empfehle ich für jeden neuen Code die native Methode.

MatchMedia vs. innerWidth: ein kurzer Vergleich

⁉️🤔 Häufig gestellte Fragen

Was ist besser: matchMedia oder window.innerWidth?

matchMedia ist immer dann besser, wenn die Logik an CSS-Breakpoints gebunden ist. Es nutzt dieselben Regeln wie @media und beseitigt Abweichungen von ein, zwei Pixeln durch Scrollleiste oder Zoom. innerWidth ist nur dann angebracht, wenn Sie den exakten numerischen Wert benötigen (etwa um zu berechnen, wie viele Elemente hineinpassen), nicht die Tatsache „Bildschirm breiter als N Pixel".

Funktioniert matchMedia in älteren Browsern?

Ja, die Unterstützung ist breit: alle modernen Browser inklusive Mobilgeräte sowie Internet Explorer 10+. IE9 und darunter bleiben außen vor; dafür müssen Sie auf window.innerWidth oder die jQuery-Variante aus diesem Artikel zurückgreifen. In der Praxis geht der Anteil von IE9 im Jahr 2026 gegen null.

Kann matchMedia mehr als nur die Breite prüfen?

Ja, die Methode akzeptiert jeden gültigen CSS-Media-Ausdruck. Zum Beispiel: (orientation: portrait) für die Geräteausrichtung; (prefers-color-scheme: dark) für das Dark Theme des Betriebssystems; (prefers-reduced-motion: reduce) für den Wunsch nach reduzierter Animation. Es funktioniert genauso wie in CSS: window.matchMedia("(prefers-color-scheme: dark)").matches liefert true, wenn der Nutzer das Dark Theme aktiviert hat.

Muss ich den change-Handler beim Verlassen der Seite entfernen?

In modernem Code nicht. Der Browser räumt den Speicher beim Entladen der Seite automatisch auf. In SPAs (React, Vue), wo Komponenten ohne Seitenneuladung ein- und ausgehängt werden, müssen Sie eine Referenz auf den Handler speichern und ihn per removeEventListener in componentWillUnmount / onUnmounted entfernen; andernfalls entstehen Speicherlecks und wiederholte Auslöser auf „toten" Komponenten.

Warum zeigen $(window).width() und matchMedia manchmal unterschiedliche Breiten an?

Weil sie unterschiedliche Dinge messen. matchMedia arbeitet mit der Viewport-Breite (dem CSS-Sichtbereich), also demselben Wert, den auch Media Queries nutzen. $(window).width() / window.innerWidth bezieht die Breite der vertikalen Scrollleiste mit ein, sofern vorhanden. Der Unterschied beträgt üblicherweise 15-17 px, exakt die Scrollleistenbreite. Daher die Regel: Wenn Sie Logik an CSS-Breakpoints binden, nutzen Sie matchMedia; benötigen Sie die „echte" Fensterbreite in Pixeln, nutzen Sie innerWidth.

Was also verwenden: das abschließende Fazit

Für neuen Code ist die Antwort eindeutig: window.matchMedia(). Es lebt im selben Vertrag wie Ihr CSS, erfordert keine manuelle Zahlenanpassung pro Breakpoint und liefert ein Ereignismodell nach dem Motto „es hat umgeschaltet, Sie wissen Bescheid", statt ständig die Breite abzufragen.

Ein typisches Szenario, bei dem der Unterschied sofort spürbar wird: Sie bauen eine Produktkarte, die auf dem Desktop eine Galerie mit vier Bildern zeigt, auf Mobilgeräten jedoch ein einzelnes, wischbares Bild. In CSS sorgt @media (max-width: 768px) für den Layoutwechsel. Im JS schreiben Sie statt if (window.innerWidth <= 768) nun matchMedia("(max-width: 768px)"), und der Browser garantiert, dass die JS-Bedingung exakt dann feuert, wenn sich das Layout ändert. Kein „fast funktioniert", keine Bugs bei 767px wegen der Scrollleiste.

Den jQuery-Ansatz mit $(window).width() belassen Sie bei der Wartung alter Projekte: Er funktioniert, zwingt Sie aber, Breakpoints im Code zu duplizieren, und driftet stillschweigend um die Scrollleistenbreite vom CSS ab.

Und wenn Sie alles hier Beschriebene in Aktion sehen möchten, finden Sie hier ein 10-minütiges Tutorial, in dem matchMedia vom Aufruf bis zum Ereignismodell erklärt wird:

Ersetzen Sie probehalber das nächste if (innerWidth < 768) durch matchMedia("(min-width: 768px)"), und Sie werden sofort spüren, wie viel sauberer der Code wird.