Reflow: keine Seite darf in zwei Richtungen scrollen

1.4.10 klingt nach Mobilgeräten, ist aber vor allem ein Zoom-Kriterium: 320 CSS-Pixel entsprechen einem üblichen Desktop-Fenster bei 400 Prozent Vergrößerung. Wer stark zoomen muss, um überhaupt lesen zu können, landet genau in dieser Breite. Wenn die Seite dann seitwärts läuft, heißt Lesen: jede Zeile zweimal in beide Richtungen scrollen.

Die drei üblichen Ursachen

/* 1. Feste Breiten zwingen zum Querscrollen */
.container { width: 1200px; }
.table-wrap { min-width: 900px; }

/* 2. Pixelgenaues Raster, das nicht umbrechen kann */
.grid { display: grid; grid-template-columns: 320px 320px 320px; }

/* 3. Text, der nicht umbrechen darf */
.product-title { white-space: nowrap; }

<!-- Zoom abgeschaltet: verletzt 1.4.4 direkt,
     denn Vergroessern ist gar nicht erst moeglich -->
<meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Der viewport-Meta-Tag gehört streng genommen zu 1.4.4 (Textgröße ändern), taucht aber fast immer zusammen mit Reflow-Problemen auf: Wer den Zoom abschaltet, hat die Anpassung nicht nur kaputt gemacht, sondern verboten.

Der Fix

/* 1. Obergrenze statt fester Breite */
.container { width: 100%; max-width: 75rem; margin-inline: auto; }

/* 2. Raster, das von selbst umbricht */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1rem;
}

/* 3. Lange Woerter brechen, statt die Seite zu verbreitern */
.product-title { overflow-wrap: anywhere; }

/* 4. Tabellen sind die Ausnahme in 1.4.10: sie duerfen scrollen,
      aber nur in ihrem eigenen Container, nie die ganze Seite */
.table-wrap { overflow-x: auto; }

<!-- Zoom erlauben: kein maximum-scale, kein user-scalable=no -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Was oft übersehen wird

• Fixierte Kopf- oder Fußleisten fressen bei starkem Zoom die halbe Höhe. Bei kleinen Viewports besser statisch stellen.
• Ein einzelnes zu breites Element (Bild, iframe, pre-Block) verbreitert die ganze Seite. max-width: 100% hilft fast immer.
• Auch die Textabstände (1.4.12) müssen überstehen: Zeilenhöhe 1,5 und größere Wortabstände dürfen nichts abschneiden.
• Prüfe mit echten Inhalten, nicht mit kurzen Beispieltexten: lange Produktnamen sind der Härtefall.

Testen

1. DevTools öffnen, responsive Ansicht auf 320 x 640 stellen.
2. Die Seite von oben nach unten durchsehen: Gibt es an irgendeiner Stelle einen horizontalen Scrollbalken?
3. Auf 400 Prozent zoomen und dasselbe im normalen Fenster prüfen.