Zoom nicht sperren: Das viewport-Meta-Tag barrierefrei konfigurieren
Ein viewport-Tag mit user-scalable=no verhindert das Heranzoomen auf dem Smartphone. So geben Sie Zoom und Skalierung wieder frei, ohne Ihr responsives Layout zu verlieren.
Inhaltsverzeichnis
Ihre Seite unterbindet das Heranzoomen auf dem Smartphone. Wer schlecht sieht, kann Texte und Details dann nicht vergrößern. EverAudit prüft das viewport-Meta-Tag gegen WCAG 1.4.4 (Resize Text) und 1.4.10 (Reflow) und meldet eine Zoom-Sperre als Befund.
Was ist das Problem?#
Das viewport-Meta-Tag steuert, wie Browser eine Seite auf mobilen Geräten skalieren. Zwei Einstellungen darin können das native Pinch-to-Zoom-Gestensystem einschränken oder deaktivieren:
user-scalable=no— deaktiviert Zoomen vollständig.maximum-scalemit einem niedrigen Wert (z. B.1.0) — begrenzt, wie stark Nutzer hineinzoomen können, selbst wenn Zoom grundsätzlich erlaubt ist.
<!-- problematisch: Zoom komplett gesperrt -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">Diese Einstellung wird häufig gesetzt, um ein „App-artiges" Nutzungsgefühl zu erzeugen oder versehentliches Zoomen bei Doppel-Tipp-Interaktionen zu verhindern — trifft dabei aber ausnahmslos alle Besucher, nicht nur die, für die das gedacht war.
Warum prüft EverAudit das?#
meta-viewport und meta-viewport-large werden als prio1/prio2-Befund geführt, weil das viewport-Tag global in einer einzigen Zeile im <head> sitzt — ein Fehler hier betrifft ausnahmslos jede Seite der Website gleichzeitig, und die Barriere ist für Betroffene absolut: Ohne Zoom-Möglichkeit gibt es keinen Workaround, um kleinen Text lesbar zu machen.
Welche Auswirkung hat das?#
Menschen mit eingeschränktem Sehen können Ihre Inhalte auf dem Handy nicht lesen und wenden sich ab — anders als am Desktop, wo Browser-Zoom oder Betriebssystem-Einstellungen oft als Workaround dienen, ist mobiles Pinch-to-Zoom für viele Nutzer die einzige verfügbare Vergrößerungsmethode. Eine Zoom-Sperre schließt diese Gruppe faktisch von der mobilen Nutzung Ihrer Seite aus.
Wie beheben Sie eine Zoom-Sperre?#
Entfernen Sie user-scalable=no und setzen Sie maximum-scale — falls überhaupt nötig — auf einen Wert, der mindestens 500 % Zoom zulässt:
<!-- vorher: Zoom komplett gesperrt -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
<!-- nachher: Zoom vollständig freigegeben -->
<meta name="viewport" content="width=device-width, initial-scale=1">Konkretes Vorgehen:
user-scalable=nogrundsätzlich entfernen — es gibt praktisch keinen legitimen Grund, Zoom komplett zu unterbinden.maximum-scaleweglassen oder großzügig setzen — fehlt der Wert, erlauben Browser standardmäßig ausreichend Zoom.- Nach dem Fix responsives Layout prüfen — bei starkem Zoom sollte Inhalt umbrechen (Reflow), nicht horizontal abgeschnitten werden.
- Zentral im Basis-Template korrigieren — das viewport-Tag sitzt praktisch immer im gemeinsamen
<head>-Partial, ein einziger Fix behebt die gesamte Website. - Doppel-Tipp-Zoom als Nicht-Problem akzeptieren — moderne Browser unterscheiden zuverlässig zwischen Tap und Zoom-Geste; das ursprüngliche Motiv für die Sperre trägt meist nicht mehr.
Fazit#
Eine Zoom-Sperre im viewport-Tag ist einer der am schnellsten behebbaren Barrierefreiheits-Fehler: eine einzelne Zeile im <head> korrigiert das Problem website-weit, ohne dass Ihr responsives Layout darunter leidet. Der Nutzen ist unmittelbar spürbar für jeden Besucher, der zum Lesen zoomen muss.
Häufige Fragen
Warum setzen Entwickler user-scalable=no überhaupt?
Meist, um zu verhindern, dass ein versehentliches Doppel-Tippen auf mobilen Geräten die Seite ungewollt hineinzoomt, oder um ein App-artiges, nicht-zoombares Gefühl zu erzeugen. Der Effekt trifft aber alle Nutzer gleichermaßen — auch jene, die zum Lesen zwingend zoomen müssen.
Wie viel Zoom muss laut WCAG mindestens möglich sein?
WCAG 1.4.4 (Resize Text) verlangt, dass Text bis mindestens 200 % vergrößert werden kann, ohne Inhalt oder Funktion zu verlieren. Die verwandte Regel meta-viewport-large prüft zusätzlich, dass mindestens 500 % Zoom technisch nicht verhindert werden.
Verschlechtert das Freigeben von Zoom mein responsives Layout?
Nein — das Entfernen von user-scalable=no und maximum-scale ändert nichts an Ihrem responsiven CSS. Es entfernt lediglich eine künstliche Bremse, die Browser am nativen Pinch-to-Zoom hindert; Ihr Layout reagiert weiterhin normal auf die Bildschirmgröße.
Was ist der Unterschied zwischen meta-viewport und meta-viewport-large?
meta-viewport prüft, ob Zoom grundsätzlich per user-scalable=no komplett deaktiviert wurde. meta-viewport-large prüft zusätzlich, ob eine vorhandene maximum-scale-Angabe zu niedrig ist und dadurch starkes Zoomen (bis mindestens 500 %) verhindert, selbst wenn Zoom grundsätzlich erlaubt ist.
EverAudit Redaktion
Fachredaktion für Web-Qualität, Barrierefreiheit und DSGVO. Wir prüfen jeden Ratgeber gegen die Kriterien unserer Audit-Engine.