Recipe: 400% Zoom Testing

Verify your UI holds up under extreme browser zoom. WCAG 1.4.4 requires content remains readable and functional at 200%, but testing at 400% reveals layout brittleness early.

Quick Setup

  1. Open Chrome DevTools → Settings → Devices.
  2. Add a custom device with viewport 320×256.
  3. Set device pixel ratio to 1.0.
  4. In the Rendering tab, set “Force page zoom” to 400%.
  5. Reload the page and navigate every critical flow.

What to Check

  • No horizontal scrollbar on any viewport.
  • Text never overlaps or gets clipped.
  • Buttons and links remain tappable (min 44×44 CSS px).
  • Modals and dropdowns stay within the viewport.
  • Focus ring is fully visible on every interactive element.

Tailwind Guardrails

These patterns prevent zoom breakage before it happens:

  • Use rem units for all spacing and typography.
  • Avoid fixed widths; prefer max-w-* and w-full.
  • Set min-h-screen on the root container.
  • Never hardcode px values in arbitrary components.
← Back to Docs