Online Tool Store
Browser-Zoomstufen-Tester
Testen Sie Reflow bei Zoom von 50% bis 800%, mit Live-Rechner für effektive Breite und Erkennung von Überlauf gegen den WCAG-1.4.10-Grenzwert von 320px.
🔒 Dieses Tool läuft vollständig in Ihrem Browser. Ihre Dateien werden niemals an einen Server hochgeladen.
Simuliert Zoom, indem ein Beispiellayout auf dieselbe "effektive CSS-Breite" skaliert wird, die ein echter Browser bei dieser Zoomstufe hätte — eine Annäherung, keine echte Rendering-Engine. Bestätigen Sie auf Ihrer eigenen Website immer mit dem echten Zoom Ihres Browsers.
100%
Willkommen in unserem Shop
Ein kurzer Textabsatz, um zu sehen, wie sich Text bei Änderung der simulierten Zoomstufe umbricht.
So wird es verwendet
- Wählen Sie eine Browser-Fensterbreite (1280px entspricht dem WCAG-1.4.10-Referenzpunkt).
- Ziehen Sie den Zoom-Regler oder klicken Sie auf eine Voreinstellung von 50% bis 800% — die effektive CSS-Breite wird live aktualisiert.
- Beachten Sie die Pass/Fail-Badges: ob Sie den 320px-WCAG-Grenzwert erreicht haben und ob das Beispiellayout bei dieser Breite horizontales Scrollen benötigt.
- Wechseln Sie in den Modus "Feste Breite (häufiger Fehler)", um zu sehen, wie ein einzelnes Element mit fester Breite den Reflow bricht und die Prüfung nicht besteht.
- Nutzen Sie dieselbe Intuition auf Ihrer eigenen Website und überprüfen Sie das Ergebnis dann mit echtem Browser-Zoom.
FAQ
Zoomt das wirklich meinen Browser?
Nein — es skaliert ein Beispiellayout auf dieselbe "effektive CSS-Breite", die ein echter Browser bei dieser Fensterbreite und Zoomstufe hätte, und prüft dann auf echten horizontalen Überlauf. Es ist eine Annäherung, keine echte Browser-Rendering-Engine. Bestätigen Sie auf Ihrer eigenen Website immer mit dem echten Zoom Ihres Browsers (Strg/Cmd + "+").
Warum kümmert sich WCAG speziell um 400% Zoom?
Das WCAG-2.1-Erfolgskriterium 1.4.10 (Reflow) verlangt, dass Inhalte bei einer effektiven Breite von 320 CSS-Pixeln ohne horizontales Scrollen in eine einzige Spalte umbrechen — die Breite, die man bei einem 1280px breiten Browserfenster mit 400% Zoom erhält, weshalb 1280px und 400% der Standardreferenzpunkt sind.
Was ist die "effektive Breite" und wie wird sie berechnet?
Die effektive Breite ist die Browserfensterbreite geteilt durch den Zoomprozentsatz (z. B. 1280px ÷ 400% = 320px). Sie zeigt, wie viel CSS-Pixel-Platz Ihr Layout nach Anwendung des Zooms tatsächlich hat — dieselbe Zahl, die ein echter Browser Ihrem CSS melden würde.
Welche Layout-Probleme treten typischerweise bei hohem Zoom auf?
Container mit fester Breite, die horizontales Scrollen verursachen, überlappende Navigationselemente, Text, der seinen Container überläuft, und abgeschnittene Buttons oder Karten sind die häufigsten Probleme, die erst ab 150-200% Zoom auftreten. Wechseln Sie zum Modus "Feste Breite (häufiger Fehler)", um genau zu sehen, wie dieser Fehler aussieht.
Schrumpft Zoomen tatsächlich den CSS-Pixel-Viewport?
Ja. Die physische Fensterbreite eines Browsers in CSS-Pixeln schrumpft mit zunehmendem Zoom — das ist der Mechanismus, den dieses Tool durch Berechnung der effektiven Breite simuliert, und deshalb kann eine mit festen Pixelbreiten gebaute Seite lange vor 400% horizontal überlaufen.
So schneiden wir ab
| Funktion | Online Tool Store | Reflow-fokussierte Tester | URL-Geräte-Vorschau-Tools |
|---|---|---|---|
| Rechner für effektive Breite (Fensterbreite ÷ Zoom %) | ✓ | ✓ | ✗ |
| Live-Prüfung auf horizontalen Überlauf (Bestanden/Nicht bestanden) | ✓ | ✓ | ✗ |
| Zoom-Voreinstellungen bis 800% mit Live-Reflow | ✓ | ✓ | ✗ |
| Keine externe URL/Einbettung nötig (funktioniert sofort, keine X-Frame-Options-Blockaden) | ✓ | ✓ | ✗ |
Ein schneller Prüfschritt, bevor Sie echte Browser-Entwicklertools öffnen und Ihre Live-Seite zoomen.