At 400% Zoom, Your Laptop Is a 320-Pixel Phone

Two Readers, One Criterion

Reflow covers two people who never meet. One is on a phone about 320 to 400 pixels wide. The other is on a laptop, zoomed to 400% because that is the size they can read. At 400% zoom a 1280-pixel window is 320 CSS pixels wide, so the browser hands both of them the same narrow screen.

If the page fits that width in one column, both of them read by scrolling down. If it does not, every line runs off the right edge, and reading means scrolling right to the end of the line, back left, and down one line, for the whole page. For a zoomed reader that is not just slow; they lose their place on every line.

What WCAG Requires

The exceptions are specific. Content that genuinely needs two dimensions to make sense is exempt: data tables, maps, diagrams, video, games, presentations and interfaces that must keep a toolbar in view while the content is being manipulated. The table can scroll sideways inside its own container. The page around it cannot.

What Breaks Reflow

1. A fixed-width viewport. <meta name="viewport" content="width=1024">, left over from a site that was once desktop-only, tells every phone to lay the page out 1024 pixels wide and shrink it to fit. On a 390-pixel phone every word renders at 38% of its size, and the page can never become one column. A page with no viewport tag at all gets a similar default layout width of about 980 pixels on most mobile browsers.

2. A fixed width on html or body. body { min-width: 1200px; } outside any media query keeps the page 1200 pixels wide on every screen. It was usually added to stop a desktop layout collapsing when the window was narrowed, and on a phone it does exactly what it was meant to.

3. Fixed-width blocks further down. A 900-pixel hero image with no max-width, a pre block of code, a long unbroken URL, an embedded iframe with a width attribute. Any single element wider than 320 pixels pushes the whole page sideways.

4. Layouts that do not wrap. A horizontal navigation bar or a row of cards laid out with flex-wrap: nowrap, or a grid with fixed column widths, that has no smaller layout below a breakpoint.

5. Sticky headers that eat the screen. Not a reflow failure in the strict sense, but at 400% zoom a sticky header 100 pixels tall can fill half of a laptop's visible height, and the reader sees a sliver of content between the header and a cookie banner. Let fixed headers become static on short screens.

The Fix

<meta name="viewport" content="width=device-width, initial-scale=1">

/* Fixed desktop widths belong inside a desktop query, or nowhere */
@media (min-width: 1024px) {
  .page { width: 1200px; }
}

/* Media never wider than its container */
img, video, iframe { max-width: 100%; height: auto; }

/* Long words and URLs wrap instead of overflowing */
body { overflow-wrap: anywhere; }

/* Code and data tables scroll inside themselves, not the page */
pre, .table-wrap { overflow-x: auto; }

/* Short screens: the header stops following the reader */
@media (max-height: 500px) {
  .site-header { position: static; }
}

Do not fix a horizontal scroll by putting overflow-x: hidden on body. The scrollbar goes away and the content past the edge is simply cut off, which is loss of information and still fails 1.4.10.

How to Test It in Two Minutes

1. On a laptop, set the browser window to 1280 pixels wide and press Ctrl or Cmd and + until the zoom reads 400%.
2. Scroll down the whole page. There should be no horizontal scrollbar, and nothing should be cut off at the right edge.
3. Open the menu, a form, a modal and a table. Each should still work at that width; only a data table may scroll sideways inside its own box.
4. Or in Chrome DevTools, use device emulation at 320 pixels wide. It shows the phone half of the same test.

How to Check Your Own Page

Whether a layout actually collapses to one column at 320 pixels is a question about the rendered page, and the checker at the top of this article does not pretend to answer it. What it does read are the two declarations that guarantee a failure before anything renders: a viewport tag with a fixed pixel width, or no viewport at all, and a pixel width or min-width on html or body outside a desktop-only media query. Both are marked for review with the file they came from, because a later rule the reader could not see can override them.

The same read fails the zoom locks covered in the pinch-to-zoom guide and the orientation locks in the orientation guide. For reflow itself, the whole-site scan renders every page in a real browser and names each WCAG 2.1 AA failure with the element and page it is on, and the checker's result hands your domain straight to it.

Frequently Asked Questions