Online Tool Store
Browser Zoomniveau Tester
Test reflow bij zoomniveaus van 50% tot 800%, met een live calculator voor effectieve breedte en detectie van overloop volgens de WCAG 1.4.10-norm van 320px.
🔒 Deze tool werkt volledig in je browser. Je bestanden worden nooit naar een server geüpload.
Simuleert zoom door een voorbeeldlayout te schalen naar dezelfde "effectieve CSS-breedte" die een echte browser bij dat zoomniveau zou hebben — een goede benadering, geen echte rendering-engine. Bevestig op je eigen site altijd met de echte zoom van je browser.
100%
Welkom in onze winkel
Een korte alinea tekst om te zien hoe tekst herschikt en afbreekt als het gesimuleerde zoomniveau verandert.
Hoe je het gebruikt
- Kies een breedte voor het browservenster (1280px komt overeen met het standaard WCAG 1.4.10-referentiepunt).
- Sleep de zoomschuifregelaar of klik op een voorinstelling van 50% tot 800% — de effectieve CSS-breedte wordt live bijgewerkt.
- Let op de geslaagd/mislukt-badges: of je de 320px WCAG-norm hebt bereikt en of de voorbeeldlayout bij die breedte horizontaal moet scrollen.
- Schakel over naar de modus "Vaste breedte (veelvoorkomende fout)" om te zien hoe één element met vaste breedte de reflow breekt en de controle laat mislukken.
- Gebruik dezelfde intuïtie op je eigen site en controleer daarna met echte browserzoom voor een nauwkeurig resultaat.
FAQ
Zoomt dit echt mijn browser?
Nee — het schaalt een voorbeeldlayout naar dezelfde "effectieve CSS-breedte" die een echte browser zou hebben bij die vensterbreedte en zoomniveau, en controleert vervolgens op echte horizontale overloop. Het is een goede benadering, niet de rendering-engine van je echte browser. Bevestig voor je eigen site altijd met de echte zoom van je browser (Ctrl/Cmd + "+").
Waarom geeft WCAG specifiek om 400% zoom?
WCAG 2.1-succescriterium 1.4.10 (Reflow) vereist dat inhoud zonder horizontaal scrollen in één kolom herschikt bij een effectieve breedte van 320 CSS-pixels — de breedte die je krijgt bij een venster van 1280px breed op 400% zoom, en daarom zijn 1280px en 400% het standaard referentiepunt.
Wat is "effectieve breedte" en hoe wordt het berekend?
Effectieve breedte is de breedte van het browservenster gedeeld door het zoompercentage (bijv. 1280px ÷ 400% = 320px). Het geeft aan hoeveel CSS-pixelruimte je layout daadwerkelijk heeft zodra zoom is toegepast — hetzelfde getal dat een echte browser aan je CSS zou rapporteren.
Welke layoutproblemen komen doorgaans voor bij hoge zoom?
Containers met vaste breedte die horizontaal scrollen veroorzaken, overlappende navigatie-items, tekst die buiten zijn container valt, en knoppen of kaarten die worden afgesneden zijn de meest voorkomende problemen die pas verschijnen zodra zoom 150-200% passeert. Schakel deze tool naar de modus "Vaste breedte (veelvoorkomende fout)" om precies te zien hoe die mislukking eruitziet.
Krimpt zoomen echt de CSS-pixel viewport?
Ja. De fysieke vensterbreedte van een browser in CSS-pixels krimpt naarmate zoom toeneemt — dat is het mechanisme dat deze tool simuleert door de effectieve breedte te berekenen, en daarom kan een pagina die met vaste pixelbreedtes is gebouwd al ruim voor 400% horizontaal beginnen over te lopen.
Hoe we ons verhouden
| Functie | Online Tool Store | Op reflow gerichte testers | URL-apparaatvoorbeeldtools |
|---|---|---|---|
| Calculator voor effectieve breedte (vensterbreedte ÷ zoom %) | ✓ | ✓ | ✗ |
| Live horizontale-overloop geslaagd/mislukt-controle | ✓ | ✓ | ✗ |
| Zoomvoorinstellingen tot 800% met live reflow | ✓ | ✓ | ✗ |
| Geen externe URL/embedding nodig (werkt direct, geen X-Frame-Options-blokkades) | ✓ | ✓ | ✗ |
Een snelle screeningstap voordat je echte browser-devtools opent en op je live pagina inzoomt.