Javascript matchMedia • Pendant zu CSS Media Queries

Media Queries zur Anpassung des Layouts

CSS Media Queries verzweigen je nach Eigenschaft des Viewports auf unterschiedliche CSS-Bereiche, um das Design oder Funktionen der Webseite an die Breite, Höhe, Orientierung oder Auflösung des Monitors, Tabletts oder Smartphones anzupassen.

<link rel="stylesheet" media="all" href="style.css" />
<link rel="stylesheet" media="(min-width:60em)" href="style.css" />

oder im CSS

@media screen and (min-width:720px) {
	h2 {
		color: blue;
	}
}

Wenn Javascript zusätzlich zum CSS einspringen soll, wenn die Media Query zutrifft, sind die Strings fast identisch – für Javascript nur ohne die @media-Direktive.

matchMedia

Äquivalent zur Media Query in CSS gibt es in JavaScript matchMedia. Fast immer reicht die Verzweigung via CSS, aber es kann auch erforderlich sein, zusätzlich mit Javascript einzugreifen wenn etwa lange Überschriften für kleine Monitore gekürzt werden oder wenn die Änderung der Orientierung des Geräts zur Umordnung von Elementen führt.

const mql = window.matchMedia("screen and (min-width:720px)");

matchMedia erweitert das Arsenal der Anpassungen – setzt z.B. aktuelles Datum und Uhrzeit für größere Monitore.

if (mql.matches) {
	const date = new Date().toLocaleString();
	document.styleSheets[0].insertRule (`h2.date:before{content: "${date} " }`);
}

CSS-Regeln mit insertRule einfügen

matchMedia mit EventListener

Wo früher resize-Events benötigt wurden, die bei jeder Größenänderung des Browserfensters feuerten, meldet ein EventListener mit matchMedia nur die Überquerung eines Breakpoints.

const mediaQuery = '(min-width: 980px)';
const queries = window.matchMedia(mediaQuery);

queries.addEventListener('change', event => {
	document.querySelector(".console").innerHTML += window.innerWidth + "
";
	if (event.matches) {
		document.querySelector(".console").innerHTML += "Browserfenster 980px oder kleiner
";
	} else {
		document.querySelector(".console").innerHTML += "Browserfenster breiter als 980px
";
	}
});

Bilder für kleine Monitore

let beach = document.querySelector ('#beach');
let mql = window.matchMedia("(min-width:740px)");

// Beim Laden Bildausschnitt initialisieren
clipImage(mql);

// Spezieller Event Listener für MediaQueryList
mql.addListener(clipImage);

function clipImage(mql) {
    if (mql.matches) {
        beach.setAttribute('viewBox','0 0 444 194');
        console.log ('Großes Browserfenster: min-width:740px');
    } else {
        beach.setAttribute('viewBox','70 -20 250 250');
        console.log ('Kleines Browserfenster min-width:740px ist false');
    }
}

Das SVG-viewBox-Attribut legt den sichtbaren Ausschnitt einer Grafik fest und kann nicht durch CSS angesprochen werden. clipImage(mql) ändert ViewBox-Attribut, um das Bild auf großen Monitoren in voller Breite und auf kleinen Monitoren als Ausschnitt zu zeigen.

let mql = window.matchMedia ("(min-width:740px)") legt ein MediaQueryList-Objekt mit Bedingungen (hier "(min-width:740px)") an. Das MediaQueryList-Objekt hat zwei Eigenschaften: matches (true oder false) und media.

Am Rande: HTML picture und das srcset-Attribut liefern ebenfalls die Informationen für den Browser, welches Format bzw. welche Auflösung bei einer bestimmten Größe des ViewPorts eingesetzt werden sollen.

matchMedia – langsame Verbindung

matchMedia Bedingungen

Die Bedingung kann auch komplexer formuliert sein – was in einer CSS @media-Regel steht, kann als Bedingung für matchMedia eingesetzt werden.

let mql = window.matchMedia("(min-width:740px) or (orientation: landscape)");

MediaQueryList
    matches: true
    media: "(min-width:740px) or (orientation: landscape)"

Der Event Handler clipImage muss einmal direkt nach der Definition des Events aufgerufen werden, damit das Script initialisiert wird, sobald die Seite geladen wurde.

mql.addListener(clipImage) ist ein spezieller Event Listener, der feuert, wenn die Bedingung (min-width:740px) zutrifft. Das ist effizienter als das periodische Abfangen eines resize-Events.