matchMediaQuery / watchMediaQuery

Eine CSS-Media-Query aus JavaScript lesen und abonnieren.

Für Layout-Entscheidungen nimm lieber das hier als isMobile(): Am User Agent zu schnüffeln erkennt das Gerät, eine Media-Query erkennt den Viewport — und nur Letzteres stimmt, wenn ein Browser am Rechner schmaler gezogen oder ein Tablet gedreht wird.

API

Funktion	Beschreibung
`matchMediaQuery(query)`	Passt die Abfrage gerade? Unter SSR `false`
`watchMediaQuery(query, callback)`	Abonniert Änderungen; gibt eine Funktion zum Abbestellen zurück
`MOBILE_MEDIA_QUERY`	`'(max-width: 768px)'`, der gemeinsame Umbruchpunkt fürs Mobilgerät

Beispiel

import { MOBILE_MEDIA_QUERY, watchMediaQuery } from 'ranuts';

const off = watchMediaQuery(MOBILE_MEDIA_QUERY, (isMobile) => render(isMobile));
onCleanup(off);

Hinweise

Die Rückruffunktion läuft einmal synchron mit dem aktuellen Wert, den Anfangszustand musst du also nie gesondert lesen.
Bestelle immer ab. Ein nicht freigegebener MediaQueryList-Listener hält die Closure (und alles DOM, das sie eingefangen hat) am Leben.
Altes Safari ist bedacht. addEventListener an MediaQueryList kam erst mit Safari 14; als Rückfall dienen addListener/removeListener.