Reflow: nijedna stranica ne smije se pomicati u dva smjera

1.4.10 zvuči kao mobilni kriterij, ali ponajprije je kriterij zumiranja: 320 CSS piksela ono je u što se pretvara običan prozor radne površine na 400 posto povećanja. Tko mora toliko zumirati da bi uopće čitao, završava upravo u toj širini. Ako stranica tada bježi postrance, čitanje znači pomicati svaki redak naprijed-natrag.

Tri uobičajena uzroka

/* 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">

Viewport meta oznaka strogo pripada kriteriju 1.4.4 (promjena veličine teksta), ali gotovo uvijek putuje uz probleme s reflowom: isključivanjem zumiranja prilagodba nije samo pokvarena, nego zabranjena.

Ispravak

/* 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">

Što se često previdi

• Ljepljiva zaglavlja i podnožja pri jakom zumiranju pojedu pola visine. Na malim prikazima postavite ih statično.
• Jedan preširok element (slika, iframe, pre blok) proširuje cijelu stranicu. max-width: 100% rješava većinu.
• I razmaci teksta (1.4.12) moraju preživjeti: visina retka 1,5 i veći razmaci riječi ne smiju ništa odrezati.
• Provjeravajte sa stvarnim sadržajem, ne s kratkim primjerima: dugi nazivi proizvoda su težak slučaj.

Provjera

1. Otvorite DevTools i postavite responzivni prikaz na 320 x 640.
2. Prođite stranicu od vrha do dna: postoji li igdje vodoravna traka za pomicanje?
3. Zumirajte na 400 posto i provjerite isto u običnom prozoru.