Was es ist
Smartphone-Bildschirme sind physisch schmal, aber lange Zeit wurden die meisten Websites für einen viel breiteren Desktop-Bildschirm gebaut. Damit diese älteren Websites weiter nutzbar bleiben, tun mobile Browser standardmäßig so, als wäre der Bildschirm etwa 980 Pixel breit — also ungefähr Desktop-Größe — und verkleinern das Ergebnis dann, damit es passt. Deshalb kann eine nicht angepasste Seite auf einem Smartphone winzig und herausgezoomt wirken, bis jemand mit den Fingern hineinzoomt.
Das Viewport-Meta-Tag ist eine einzelne Codezeile, <meta name="viewport" content="width=device-width, initial-scale=1">, die diese alte Standardeinstellung überschreibt und dem Browser sagt: "Zeig diese Seite tatsächlich in der echten Bildschirmbreite an, bei normalem Zoom." Erst dadurch wirkt ein responsives Design (eines, das sich an unterschiedliche Bildschirmgrößen anpasst) auf dem Smartphone auch tatsächlich so.
Warum es wichtig ist
Ohne dieses Tag bekommt eine Seite, die sorgfältig so gestaltet wurde, dass sie sich für mobile Bildschirme anpasst, dazu nie die Chance — das Smartphone zeigt sie als geschrumpftes Desktop-Layout an, egal wie gut das zugrunde liegende Design eigentlich gebaut wurde. Das ist eine rein technische Alles-oder-nichts-Einstellung: Entweder das Tag ist korrekt vorhanden, oder jeder Besucher auf dem Smartphone sieht das falsche Layout, egal wie gut der Rest der Website gestaltet ist.
Weil bei den meisten Websites mehr als die Hälfte des Datenverkehrs von Smartphones kommt, kann diese eine fehlende Zeile die Mehrheit der Besucher betreffen, bevor sie überhaupt anfangen zu lesen.
So behebst du es
- Sieh dir den HTML-Quelltext deiner Seite an und prüfe im
<head>-Bereich, ob ein Tag beginnend mit<meta name="viewport"vorhanden ist. - Fehlt es, füge
<meta name="viewport" content="width=device-width, initial-scale=1">direkt im<head>-Bereich ein. - Falls du einen Website-Baukasten nutzt (Squarespace, Wix, Webflow, WordPress), wird das automatisch von der Plattform gesetzt — fehlt es trotzdem, liegt das fast immer an einem eigenen Code-Einbau, der es überschreibt, also prüfe alle selbst hinzugefügten
<head>-Codes. - Vermeide es,
maximum-scale=1oderuser-scalable=noim selben Tag zu ergänzen — das hindert Besucher am Heranzoomen mit zwei Fingern und schafft ein eigenes Problem bei der Barrierefreiheit. - Lade die Seite danach auf einem echten Smartphone (oder im mobilen Vorschaumodus deines Browsers), um zu bestätigen, dass sie den Bildschirm jetzt in lesbarer Größe füllt, statt herausgezoomt zu wirken.