Viewport und Zoom

Was wir prüfen

Wir lesen die Viewport-Angabe im Kopf der Startseite, ein Element wie:

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

• Fehlt es, ist das ein schwerer Mangel. Ebenso, wenn es die Seite nicht an die Breite des Geräts anpasst. Dafür braucht es width=device-width oder, ohne Breitenangabe, initial-scale=1: Daraus leiten aktuelle Browser die Gerätebreite ab. Eine feste Breite wie width=980 stellt die Seite dagegen wie auf dem Desktop dar.
• Enthält es user-scalable=no oder maximum-scale=1, ist Zoomen gesperrt. Das ergibt eine Warnung.

Warum das wichtig ist

Ohne Viewport-Angabe geht der Smartphone-Browser davon aus, dass die Seite für einen grossen Bildschirm gemacht ist. Er stellt sie rund 980 Pixel breit dar und verkleinert sie dann auf die Breite des Smartphones. Das Ergebnis: winzige Schrift, die man nur mit Zoomen und seitlichem Wischen lesen kann. Auch ein sauber gestaltetes, responsives Layout greift ohne diese Zeile nicht.

Google bewertet Websites nach ihrer Smartphone-Ansicht. Eine Seite, die auf dem Smartphone nicht lesbar ist, wird entsprechend schlechter eingestuft.

Gesperrtes Zoomen ist ein verbreiteter Fehler aus der Anfangszeit mobiler Websites. Es sollte verhindern, dass sich das Layout beim Doppeltippen verschiebt. Heute ist es unnötig und schliesst Menschen aus, die schlecht sehen und Text vergrössern möchten, etwa eine Telefonnummer, eine Adresse oder einen Preis. Die Barrierefreiheitsrichtlinien WCAG verlangen, dass Text auf das Doppelte vergrössert werden kann.

So behebst Du es

Diese eine Zeile gehört in den <head> jeder Seite:

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

Entferne user-scalable=no, user-scalable=0 und maximum-scale=1 aus der Angabe, falls vorhanden.

WordPress

Aktuelle Themes setzen die Viewport-Angabe selbst. Fehlt sie, ist das Theme sehr alt. Ein Wechsel auf ein aktuelles, responsives Theme löst das Problem und viele andere gleich mit. Steht eine Zoomsperre drin, kommt sie meist aus dem Theme oder einem Plugin. In der Datei header.php des Themes lässt sie sich entfernen, besser in einem Child-Theme, damit Updates sie nicht überschreiben.

Wix, Jimdo, Squarespace

Die Baukästen setzen die Angabe korrekt. Hier ist nichts zu tun.

Eigener Code

Such im Template nach name="viewport" und ersetze die Zeile durch die obige.

So prüfst Du es selbst

Öffne die Website auf dem Smartphone. Der Text sollte ohne Zoomen lesbar sein, und mit zwei Fingern solltest Du trotzdem hineinzoomen können. Im Seitenquelltext findest Du die Angabe mit einer Suche nach viewport.

Häufige Fragen

Warum Zoomen erlauben? Das Layout ist doch für Smartphones gemacht.

Weil nicht alle gleich gut sehen. Ältere Menschen und Menschen mit Sehschwäche vergrössern Texte, Telefonnummern oder Kleingedrucktes. Gesperrtes Zoomen schliesst sie aus und verstösst gegen die Barrierefreiheitsrichtlinien.

Ignorieren Smartphones die Zoomsperre nicht sowieso?

Safari auf dem iPhone erlaubt das Zoomen inzwischen trotz Sperre, viele Android-Browser und eingebettete Ansichten in Apps halten sich aber daran. Die Sperre bringt keinen Vorteil, nur Nachteile.