Viewport bezeichnet die Größe des sichtbaren Bereichs in einem Fenster oder auf einem Bildschirm. Im allgemeinen Sprachgebrauch meint der Begriff die Bildschirme mobiler Geräte wie Smartphones und Tablets.

Der Begriff hat noch eine engere Bedeutung: ein Meta-Element in HTML 5, das bei der Optimierung für mobile Geräte eine wichtige Rolle spielt. Dieses Stück Markup skaliert den angezeigten Inhalt automatisch, sodass die Größe des Bildschirms sinnvoll genutzt wird. In dieser Rolle sorgt das Meta-Element Viewport dafür, dass sich der gesamte Inhalt gleichmäßig über den Bildschirm verteilt und auf Bildschirmen unterschiedlicher Größe richtig und vollständig erscheint. Der Viewport-Code passt Webseiten an Höhe und Breite des Bildschirms an, damit mobile Browser den gesamten Inhalt richtig anzeigen können.

Die Größe Ihres eigenen Viewports

Viewport Checker (Bildschirmmaße)

Die Seite oben nennt Ihnen die genauen Maße Ihres eigenen Bildschirms.

Der HTML-Code

Es gibt zwei Wege, den Viewport-Code in Ihre HTML-Dateien zu bringen: direkt in das Dokument oder in eine CSS-Datei, auf die das Dokument verweist. Die Schreibweise der beiden Möglichkeiten unterscheidet sich nur geringfügig.

Wenn Sie den Viewport direkt als Meta-Tag in Ihre HTML-Datei schreiben möchten, können Sie den folgenden Code verwenden:

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

Die Breite ist hier so festgelegt, dass sie sich der Bildschirmbreite des jeweiligen Geräts anpasst (width=device-width). initial-scale ist der anfängliche Zoomfaktor und legt fest, dass Ihre Seite auf dem Bildschirm dieses mobilen Geräts im Verhältnis 1:1 erscheint.

Über einen Viewport lassen sich außerdem die Höhe festlegen und ein minimaler und/oder maximaler Zoomfaktor einstellen. Zusätzlich können Sie mit diesem Meta-Tag verhindern, dass Nutzer zoomen (user-scalable=no), was Ihre Werte für die Barrierefreiheit senken kann.

Wenn Sie den Viewport statt im Meta-Tag in einer CSS-Datei angeben, ist es gesünder, ihn ganz an den Anfang der Datei zu setzen, damit die Anzeige stimmt. Ein Beispiel, wie dieser Code aussehen kann:

@viewport {
width: device-width;
}

Der Viewport-Code, den ich empfehle

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

Der Code, den wir empfehlen, öffnet standardmäßig im Verhältnis 1:1. Wenn ein Nutzer es aber braucht, kann er die Texte, die Inhalte, die ganze Website bis zu einem Faktor von 5 heranzoomen. Damit holen Ihre Besucher das Meiste aus Ihrer Website. Zugleich erleichtert es Menschen mit eingeschränktem Sehvermögen das Lesen.

Die Warnung von PageSpeed lautet: [user-scalable=”no”] wird im Element verwendet, oder das Attribut [maximum-scale] ist kleiner als 5.

Um diese Warnung loszuwerden, verwenden Sie den oben geteilten Code.