matchMediaQuery / watchMediaQuery

Read and subscribe to a CSS media query from JavaScript.

Prefer these over isMobile() for layout decisions: UA sniffing identifies the device, a media query identifies the viewport, and only the latter is right when a desktop browser is narrowed or a tablet is rotated.

API

Function	Description
`matchMediaQuery(query)`	Does the query match right now? `false` under SSR
`watchMediaQuery(query, callback)`	Subscribe to changes; returns an unsubscribe function
`MOBILE_MEDIA_QUERY`	`'(max-width: 768px)'`, the shared mobile breakpoint

Example

import { MOBILE_MEDIA_QUERY, watchMediaQuery } from 'ranuts';

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

Notes

The callback fires once synchronously with the current value, so you never have to read the initial state separately.
Always unsubscribe. An unreleased MediaQueryList listener keeps the closure (and whatever DOM it captured) alive.
Old Safari is handled. addEventListener on MediaQueryList only landed in Safari 14; addListener/removeListener is used as a fallback.