Zoomen auf dem Handy erlauben: user-scalable=no entfernen

Warum das wichtig ist

Viele Menschen zoomen auf dem Handy ganz selbstverständlich: um eine Telefonnummer zu lesen, ein Detail auf einem Produktfoto zu sehen oder weil die Augen mit 55 nicht mehr so wollen. Wer eine Sehbehinderung hat, ist darauf angewiesen. Verbietet die Seite das Vergrößern, bleibt nur der Absprung.

Die WCAG verlangen in Erfolgskriterium 1.4.4, dass sich Text auf 200 Prozent vergrößern lässt, ohne dass Inhalt oder Funktionen verloren gehen. Daher kommt unser Schwellenwert: Ein maximum-scale unter 2 lässt diese Vergrößerung gar nicht zu.

Fairerweise muss man sagen: Safari auf dem iPhone ignoriert user-scalable=no seit iOS 10 und lässt trotzdem zoomen. Chrome auf Android hat in den Bedienungshilfen eine Einstellung, die Zoomen erzwingt. Darauf verlassen kannst du dich nicht. Die Einstellung kennt kaum jemand, und andere Browser halten sich an dein Verbot.

Warum das überhaupt drinsteht

Meist hat es einen von zwei Gründen. Der häufigste: iOS zoomt automatisch in ein Formularfeld hinein, wenn dessen Schrift kleiner als 16 Pixel ist, und das sieht unschön aus. Statt die Schrift zu vergrößern, hat jemand das Zoomen abgeschaltet. Die richtige Lösung ist eine Zeile CSS.

Der zweite Grund ist ein Überbleibsel aus der Zeit, als Webseiten sich "wie eine App" anfühlen sollten und Browser beim Antippen auf einen möglichen Doppeltipp warteten. Moderne Browser verzichten bei width=device-width auf diese Verzögerung. Für das Verbot gibt es also keinen Grund mehr.

input, select, textarea {
  font-size: 16px; /* verhindert den Auto-Zoom auf dem iPhone */
}

So prüfst du es selbst

Öffne deine Seite auf dem Smartphone und zieh zwei Finger auseinander. Klappt das nicht oder nur ein kleines Stück, ist der Viewport verriegelt. Teste dabei mit Chrome auf Android, weil Safari das Verbot übergeht und dir ein falsches Bild liefern kann.

Am Rechner öffnest du den Quelltext mit Strg+U und suchst nach viewport. Steht dort user-scalable=no, user-scalable=0 oder maximum-scale=1, hast du den Fehler gefunden.

checkfrei liest den Viewport automatisch aus. Findet der Check user-scalable=no oder ein maximum-scale unter 2, ist das ein Fehler. Starte den kostenlosen Check, dann weißt du es in einer Minute.

So behebst du es

Das richtige Viewport-Tag ist kurz, mehr braucht keine Seite. Details stehen im Ratgeber zum Viewport für Mobilgeräte.

<meta name="viewport" content="width=device-width, initial-scale=1">

import type { Viewport } from 'next';

// Nur diese beiden Werte. maximumScale und userScalable gehören nicht hinein.
export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
};