responsive/reflow

Dlaczego

People who zoom to 400% on a 1280px screen see the page at 320 CSS px. If lines run off the side they have to scroll back and forth for every line, and content cut off by fixed widths, sticky bars or overflow: hidden is lost to them entirely.

Poprawka

Test at a 320 CSS px wide viewport (and 256 px tall for horizontal scripts): nothing may need horizontal scrolling except parts that need two dimensions (data tables as a whole, maps, diagrams, video, code). Fix with fluid widths, wrapping flex and grid, min-width: 0 on flex children, overflow-wrap: anywhere for long strings, and smaller sticky headers on short screens.

Przykłady

// In DevTools at 320 px wide: list the elements wider than the page
[...document.querySelectorAll('body *')].filter((el) => el.getBoundingClientRect().right > document.documentElement.clientWidth)

Źródła

• WCAG 2.2, Understanding SC 1.4.10 Reflow
• web.dev, Learn Responsive Design

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain responsive/reflow