Browser APIs and URL State

MatchMedia State

Viewport Data Chooses a Layout

A browser media-query object reports viewport state. The replay shows that reading matches does not repaint until code writes DOM state for CSS to use.

Program

The source reads a media-query result, stores the result in a data attribute, updates visible text, and marks the panel ready.

match_media_state.js 
const media = window.matchMedia('(max-width: 700px)');
const panel = document.querySelector('#media-panel');
const label = document.querySelector('#media-label');

const compact = media.matches;

panel.dataset.layout = compact ? 'compact' : 'wide';

label.textContent = compact ? 'compact viewport' : 'wide viewport';

panel.classList.add('ready');
matchMedia `window.matchMedia(query)` returns an object that can report whether the current viewport matches a CSS media query.
matches The `matches` boolean is data from the browser. Reading it does not change the page by itself.
responsive state Responsive state becomes visible when code or CSS maps viewport information to layout, spacing, or labels.