Das Zoom-Verhalten auf Mobilgeräten beschreibt, ob und wie weit sich eine Seite auf dem Telefon mit zwei Fingern vergrößern lässt. Entschieden wird das im Meta-Viewport-Tag im Kopf des Dokuments. Wer dort user-scalable=no oder maximum-scale=1 einträgt, sperrt den Zoom und schließt damit alle aus, die auf eine größere Darstellung angewiesen sind.
- Zoom-Verhalten auf Mobilgeräten
Frage, ob sich eine Seite auf dem Telefon mit zwei Fingern vergrößern lässt, und wie das Meta-Viewport-Tag darüber entscheidet.
Beispiel: „Im Viewport-Tag steht noch maximum-scale=1, deshalb lässt sich die Seite auf dem Telefon nicht aufziehen.“Abgrenzung: Gemeint ist der Pinch-Zoom des Besuchers. Der Startmaßstab initial-scale, mit dem die Seite geladen wird, ist etwas anderes: Er darf gesetzt werden, die Obergrenze sollte offen bleiben.
Verbreiteter Irrtum: Die Sperre sei nötig, damit das Layout hält. Ein Layout, das bei doppelter Vergrößerung zerfällt, hat ein Layout-Problem.
So funktioniert der Zoom auf dem Telefon
Zwei Dinge laufen hier nebeneinander. Das Viewport-Tag legt fest, wie breit sich die Seite beim Laden aufbaut, üblicherweise mit width=device-width und initial-scale=1. Davon getrennt kann der Besucher jederzeit mit zwei Fingern aufziehen oder doppelt tippen, um einen Ausschnitt zu vergrößern. Nur diesen zweiten Teil schalten user-scalable und maximum-scale ab.
<!-- Sperrt den Zoom und verstößt gegen WCAG 1.4.4 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Richtig: nur Breite und Startmaßstab festlegen -->
<meta name="viewport" content="width=device-width, initial-scale=1">Warum user-scalable=no gegen die WCAG verstößt
Erfolgskriterium 1.4.4 Resize Text (Stufe AA) verlangt, dass Text ohne Hilfsmittel auf 200 Prozent vergrößert werden kann, ohne dass Inhalt oder Funktion verloren gehen. Eine gesperrte Seite erfüllt das auf dem Telefon nicht. Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für viele gewerbliche Websites mit Angeboten an Endverbraucher, und die dort maßgebliche Norm EN 301 549 verweist auf die WCAG in Stufe AA. Damit ist aus einer Empfehlung eine Rechtsfrage geworden.
Die Sperre stammt meist aus der Zeit, in der sie gegen die Verzögerung beim Doppeltippen und gegen den Sprung half, den iOS beim Antippen kleiner Formularfelder macht. Apple ignoriert user-scalable=no in Safari seit iOS 10 ohnehin, und Chrome lässt sich über eine Einstellung dazu bringen. Darauf verlassen solltest du dich trotzdem nicht: Das Tag bleibt ein Mangel im Audit, und nicht jeder Browser hebt die Sperre auf.
Was du stattdessen tust
Setze im Viewport-Tag nur width=device-width und initial-scale=1 und lass die Obergrenze weg. Gegen den Sprung beim Antippen von Formularfeldern hilft eine Schriftgröße von mindestens 16 CSS-Pixeln in Eingabefeldern, denn darunter zoomt iOS automatisch heran.
Der zweite Teil der Arbeit liegt im Layout. Erfolgskriterium 1.4.10 Reflow (Stufe AA) verlangt, dass eine Seite bei 320 CSS-Pixeln Breite lesbar bleibt, ohne dass horizontal gescrollt werden muss. Wer das erfüllt, hat auch beim Aufziehen auf 200 Prozent selten Probleme, weil beides dieselbe Ursache hat: feste Breiten in Pixeln. Das gesperrte Viewport-Tag ist einer der Klassiker, die aus einem alten Theme unbemerkt in die neue Seite wandern.