Eine Zeile im Theme sperrt den Zoom auf dem Handy

Deine Kundin steht im Baumarkt und will schnell nachsehen, welche Größe sie beim letzten Mal bei dir bestellt hat. Die Schrift auf deiner Seite ist klein, sie zieht zwei Finger auseinander, und nichts passiert. Kein Zoom, kein größerer Text, die Seite bleibt so winzig wie vorher. Sie probiert es ein zweites Mal, dann steckt sie das Handy weg.

Wir prüfen regelmäßig deutsche Websites automatisch auf typische Barrieren, immer die Startseite, immer nach denselben Regeln. Ein Ergebnis sticht dabei heraus. 16,6 Prozent der 14.984 geprüften Seiten sperren das Vergrößern per Zoom auf dem Handy. Bei WooCommerce-Shops sind es 36 Prozent, also mehr als doppelt so viele wie im Durchschnitt.

Das ist jede sechste Seite, und bei Shops jede dritte. Ausgerechnet dort, wo jemand die Zutatenliste, die Versandkosten oder das Kleingedruckte im Warenkorb lesen möchte, ist der einfachste Handgriff der Welt abgeschaltet. In den allermeisten Fällen war das keine Entscheidung des Betreibers. Die Zeile kam mit dem Theme ins Haus, und angesehen hat sie sich nie jemand.

Woher die Sperre kommt

Jede Website hat im Kopfbereich des Quelltextes eine Zeile, die dem Handy sagt, wie breit die Seite dargestellt werden soll. Sie heißt viewport-Angabe und ist an sich völlig harmlos. Zwei Zusätze darin schalten den Zoom ab. user-scalable=no verbietet das Vergrößern rundheraus, und maximum-scale=1 erlaubt es formal, deckelt es aber bei der Originalgröße, was praktisch aufs Gleiche hinausläuft.

Der Code, vorher und nachher

<!-- vorher, so liefern es viele Themes aus -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

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

Mehr ist es nicht. width=device-width und initial-scale=1 sorgen weiterhin dafür, dass die Seite in Gerätebreite startet, genau wie bisher. Du entfernst nur die beiden Deckel. Am Layout ändert sich dadurch nichts, es wird lediglich wieder beweglich. Wenn du unbedingt eine Obergrenze möchtest, schreib maximum-scale=5. Nötig ist auch das nicht.

Diese Änderung gehört in den Quelltext deines Themes. Ein Skript, das von außen dazugeladen wird, kann sie nicht zuverlässig heilen, weil der Browser die Zeile schon beim Aufbau der Seite auswertet.

Warum Entwickler das früher gemacht haben

Das Argument hatte einmal Substanz. In den Jahren nach dem ersten iPhone warteten mobile Browser nach jedem Fingertipp rund 300 Millisekunden ab, weil ein zweiter Tipp folgen und daraus ein Doppeltipp zum Vergrößern werden konnte. Buttons fühlten sich dadurch träge an. Wer den Zoom abschaltete, bekam diese Reaktionszeit zurück.

Der zweite Grund war Kosmetik. Frühe responsive Layouts fielen auseinander, sobald jemand hineinzoomte, weil feste Breiten und absolut positionierte Elemente sich gegeneinander verschoben. Statt das Layout zu reparieren, hat man den Auslöser weggesperrt.

Beide Gründe sind abgelaufen. Chrome hat die Wartezeit schon 2014 für alle Seiten gestrichen, die width=device-width angeben, die anderen Browser sind nachgezogen. Ein Layout aus Prozentwerten, Flexbox und Grid verträgt Vergrößerung ohne Murren. Übrig bleibt eine Gewohnheit, die von Theme zu Theme weitergereicht wird.

Dazu kommt ein Punkt, der viele überrascht. Safari auf dem iPhone ignoriert die Sperre seit iOS 10 und lässt das Vergrößern trotzdem zu. Das klingt nur nach Entwarnung. Chrome auf Android hält sich an die Zeile, solange niemand tief in den Einstellungen das erzwungene Zoomen aktiviert hat, und die eingebauten Browser in Instagram, Facebook und vielen anderen Apps halten sich ebenfalls daran. Wer deinen Shop aus einem Beitrag heraus öffnet, sitzt genau in diesem Fenster fest.

Wen das trifft

Vergrößern ist die stillste Hilfe im Netz. Sie steckt in jedem Handy, niemand muss sie vorher einschalten, und niemand meldet sich hinterher bei dir und beschwert sich, wenn sie fehlt. Ab Mitte vierzig lässt die Naheinstellung der Augen nach, und irgendwann betrifft das fast jeden. Dazu kommen die ganz banalen Lagen: Sonne auf dem Display, ein wackelnder Bus, die Lesebrille liegt im Auto, das Produktfoto ist daumennagelgroß.

Nimm einen Kunden, der vor seinem Sicherungskasten steht und die Typenbezeichnung auf einem Bauteil mit dem Foto in deinem Shop vergleicht. Er will das Bild größer ziehen, um die letzten drei Ziffern zu lesen. Es bewegt sich nichts. Er bestellt dann eben dort, wo er lesen kann, was er kauft.

Wo die Zeile bei dir steckt

WordPress

Bei klassischen Themes findest du sie in wp-content/themes/dein-theme/header.php, oben im Kopfbereich. Manche Themes setzen sie stattdessen aus der functions.php heraus über einen Haken an wp_head. Bei Block-Themes gibt WordPress selbst eine saubere Zeile aus, dort stammt die Sperre fast immer aus einem Plugin oder einem Child-Theme. Am schnellsten kommst du über eine Volltextsuche im Theme-Ordner nach user-scalable ans Ziel.

WooCommerce

WooCommerce selbst setzt die Zeile nicht, das machen die Shop-Themes. Hinter den 36 Prozent steckt meistens ein Formularproblem. Safari auf dem iPhone zoomt von allein in ein Eingabefeld hinein, sobald dessen Schrift kleiner als 16 Pixel ist, und an der Kasse sieht dieses Rucken unruhig aus. Viele haben deshalb den Zoom abgeschaltet, statt die Schriftgröße anzufassen. Die saubere Lösung ist eine einzige CSS-Regel, die alle Eingabefelder auf 16 Pixel setzt.

input,
select,
textarea {
  font-size: 16px;
}

Damit bleibt das Formularfeld ruhig, und das Vergrößern steht allen anderen weiterhin zur Verfügung.

Shopify

Dort sitzt die Zeile in layout/theme.liquid, meist innerhalb der ersten zwanzig Zeilen, manchmal ausgelagert in snippets/meta-tags.liquid. Du kommst über Onlineshop, dann Themes, dann den Dreipunkt-Knopf und Code bearbeiten dorthin. Leg vorher eine Kopie des Themes an. Sieht der Code sauber aus und der Zoom klemmt trotzdem, schreibt eine App die Zeile nachträglich per JavaScript um. Dann hilft nur, die Apps einzeln abzuschalten und erneut zu testen.

Der Test dauert zwei Minuten

1. Öffne deine Startseite am Computer in Chrome, Firefox oder Edge.
2. Klick mit der rechten Maustaste auf eine freie Stelle und wähle „Seitenquelltext anzeigen“. Über die Tastatur geht das mit Strg und U, am Mac mit Wahltaste, Befehlstaste und U.
3. Drück Strg und F (am Mac Befehlstaste und F) und tippe viewport ins Suchfeld.
4. Lies die gefundene Zeile. Steht dort user-scalable=no oder maximum-scale=1, ist der Zoom gesperrt.
5. Gegenprobe am Handy: Öffne dieselbe Seite auf einem Android-Gerät in Chrome und zieh zwei Finger auseinander. Bleibt alles gleich groß, hast du die Bestätigung.
6. Auf dem iPhone taugt diese Gegenprobe nicht, weil Safari die Sperre übergeht. Verlass dich dort auf den Quelltext.

Findest du gar keine viewport-Zeile, hast du ein anderes Problem. Ohne sie zeigt das Handy die Seite in Desktop-Breite an, und dann ist von vornherein alles winzig.

Was danach noch dran ist

Die viewport-Zeile ist die eine Hälfte der Sache. Die andere zeigt sich, sobald tatsächlich jemand vergrößert. Dann fällt Text aus Kästen mit fester Höhe heraus, ein Menü legt sich über den halben Bildschirm, oder der Bestellknopf verschwindet, weil overflow: hidden ihn abschneidet. Stell den Browser am Computer einmal auf 200 Prozent und klick dich durch Startseite, Kontakt und Warenkorb. Was dabei hakt, sind meistens ein paar feste Höhen im Stylesheet, die eine min-height vertragen würden. Zwanzig Minuten für beides, und deine Seite lässt sich wieder von allen lesen, die sie ohnehin schon aufrufen.