Praxisleitfaden Vergrößerung der Seite
Zoom auf Ihrer Website ermöglichen
Erkennen Sie Zoom-Sperren und korrigieren Sie die Viewport-Angabe.
meta-viewportWCAG 1.4.4
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-meta-viewport.html
Zoom-Sperre einordnen
Die Einschränkung steht im Dokumentkopf
Scanner-Signal
meta[name="viewport"] enthält user-scalable=no und maximum-scale=1. Die Regel meta-viewport meldet einen Verstoß.
Technische Einordnung
- Regel
meta-viewport- Referenz
- WCAG 1.4.4
Die Kalibrierseite „Owaka“ gibt dem mobilen Browser vor, Vergrößerung zu sperren. Der geprüfte Meta-Eintrag ist unsichtbar; betroffen ist die Darstellung der gesamten Seite.
Bedeutung im Nutzungskontext
Wer die kleinen Zusatzangaben unter den Posten der Packtafel oder die schmalen Plus- und Minus-Schalter nur vergrößert lesen und treffen kann, benötigt den Browser-Zoom. Eine Sperre kann diese Anpassung verhindern, obwohl die Seite in der Ausgangsgröße unauffällig aussieht.
Vorher: Viewport-Diagnose
user-scalable=no: Zoom wird untersagt
maximum-scale=1: Skalierung wird auf den Faktor 1 begrenzt
Axe meta-viewport: Verstoß am Meta-EintragDie zentrale Viewport-Vorgabe nachprüfen
Eine Head-Vorlage kann Zoom auf mehreren Seiten begrenzen. Prüfen Sie nach der Änderung auch die Nutzung bei Vergrößerung.
- Ausrüstungsplan× Befund im Beispiel
- Streckenprofile× Befund im Beispiel
- Kontakt Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie das ausgelieferte Meta-Element und vergrößern Sie Inhalte im vorgesehenen mobilen Browser.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welche Angabe begrenzt die Vergrößerung?
Prüfen Sie den vollständigen content-Wert des Viewport-Eintrags.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| user-scalable=no | Der Browser soll Vergrößerung ausdrücklich unterbinden. | Entfernen Sie die Sperre. Im Beispiel steht sie neben einer zweiten Beschränkung. |
| maximum-scale=1 | Die Seite begrenzt die maximal erlaubte Skalierung auf die Ausgangsgröße. | Entfernen Sie die Obergrenze. Nur user-scalable zu ändern reicht hier nicht aus. |
| width=device-width, initial-scale=1 | Die Angaben legen die Ausgangsdarstellung auf mobilen Geräten fest. | Behalten Sie diese Angaben bei; sie setzen in diesem Beispiel keine Zoom-Sperre. |
Seitenkontext ansehen
Sichtbarer Inhalt, unsichtbare Zoom-Sperre
Der Ausschnitt zeigt die vollständige Arbeitsfläche der Ausrüstungsprüfung: links die Packtafel mit sieben Posten, rechts den Abschnittsbericht mit Fortschritt und Auswertungsschalter. Die Markierung kennzeichnet den betroffenen Seitenbereich; der eigentliche Befund liegt im Meta-Eintrag des Dokumentkopfs.
Gerade die kleinen Zusatzzeilen unter jedem Posten, etwa „für jede eingetragene Person“, machen den Bedarf an Vergrößerung nachvollziehbar. Der Ausschnitt zeigt die Ausgangsdarstellung, keine simulierte Zoom-Geste. Den technischen Unterschied belegen die Diagnose und der erneute Test.
Viewport korrigieren
Beide Beschränkungen entfernen
Bearbeiten Sie den bestehenden Viewport-Eintrag im Dokumentkopf. Entfernen Sie user-scalable=no und maximum-scale=1; die Breitenangabe und Ausgangsskalierung bleiben erhalten.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Entfällt
1, maximum-scale=1, user-scalable=no- Kommt hinzu
1
Im CMS oder Framework Suchen Sie die Viewport-Einstellung im Theme oder gemeinsamen Head-Template. Prüfen Sie nach dem Veröffentlichen das erzeugte HTML: Eine zentrale Einstellung kann mehrere Seiten betreffen.
Vollständigen Code vergleichen
Vorher
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Nachher
<meta name="viewport"
content="width=device-width, initial-scale=1">Markierte Zeilen wurden geändert
Änderung umsetzen
Die veröffentlichte Vorgabe zählt
Verfolgen Sie den Meta-Eintrag bis zur Quelle, die ihn erzeugt.
- 1
Ändern Sie den vorhandenen Eintrag, statt einen zweiten Viewport-Eintrag daneben zu setzen.
- 2
Prüfen Sie nach dem Seitenaufbau, ob Theme, Plugin oder JavaScript die Beschränkungen erneut ergänzt.
- 3
Testen Sie die betroffenen Seitentemplates, wenn der Dokumentkopf gemeinsam erzeugt wird.
- 4
Prüfen Sie anschließend Vergrößerung und Bedienbarkeit im mobilen Browser mit den relevanten Inhalten.
Fehlversuche vermeiden
Was die Zoom-Sperre nicht zuverlässig behebt
Nur user-scalable ändern
maximum-scale=1 bleibt dann bestehen. Im gezeigten Eintrag müssen beide Einschränkungen entfallen.
Den gesamten Viewport-Eintrag löschen
Dadurch gehen auch die Angaben zur mobilen Ausgangsdarstellung verloren. Die gezielte Änderung erhält sie.
Nur am Desktop hineinzoomen
Ein erfolgreicher Desktop-Zoom belegt nicht, dass der mobile Browser die Viewport-Angabe ohne Einschränkung verarbeitet.
Auf einen identischen Screenshot vertrauen
Die Korrektur verändert die erlaubte Skalierung. Bei unveränderter Ausgangsgröße muss deshalb kein sichtbarer Unterschied entstehen.
Der Meta-Eintrag besteht den erneuten Test
Nach der Korrektur meldet Axe am selben Viewport-Element einen Pass. Die Rohaufnahmen sind pixelgleich, weil die Änderung keine Vergrößerung auslöst.
Der Test belegt die korrigierte Viewport-Vorgabe. Er beweist weder die mobile Zoom-Bedienung noch die vollständige Erfüllung von WCAG 1.4.4.
Nachher: Viewport-Diagnose
content="width=device-width, initial-scale=1"
Keine Zoom-Sperre und keine maximale Skalierung vorgegeben
Axe meta-viewport: Pass am unveränderten Meta-KnotenPrüfumfang verstehen
Konfiguration automatisch, Nutzbarkeit manuell prüfen
Eine erlaubte Vergrößerung muss auch zu lesbaren und bedienbaren Inhalten führen.
Automatisch prüfbar
- Einschränkende Werte im Viewport-Meta-Eintrag erkennen
- Den Befund dem konkreten Element im Dokumentkopf zuordnen
- Die korrigierte Vorgabe mit derselben Regel nachprüfen
Im Kontext zu entscheiden
- Zoom im vorgesehenen mobilen Browser tatsächlich ausführen
- Lesbarkeit der kleinen Zusatzangaben in der Packtafel bei Vergrößerung beurteilen
- Inhalte, Formularbeschriftungen und Funktionen auf Abschneiden oder Überlagerung prüfen