matchMediaQuery / watchMediaQuery

Lê uma media query de CSS pelo JavaScript e assina as mudanças dela.

Para decidir o layout, prefira isto ao isMobile(): farejar o UA identifica o dispositivo, uma media query identifica a janela, e só a segunda acerta quando um navegador de mesa é estreitado ou um tablet é girado.

API

Função	Descrição
`matchMediaQuery(query)`	A consulta casa agora? `false` em SSR
`watchMediaQuery(query, callback)`	Assina as mudanças; devolve uma função para cancelar
`MOBILE_MEDIA_QUERY`	`'(max-width: 768px)'`, o ponto de quebra móvel compartilhado

Exemplo

import { MOBILE_MEDIA_QUERY, watchMediaQuery } from 'ranuts';

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

Notas

A função é chamada uma vez, de forma síncrona, com o valor atual, então nunca é preciso ler o estado inicial à parte.
Sempre cancele a assinatura. Um ouvinte de MediaQueryList que não é liberado mantém viva a clausura (e todo o DOM que ela capturou).
O Safari antigo está contemplado. O addEventListener no MediaQueryList só chegou no Safari 14; como reserva usam-se addListener/removeListener.