Viewport einfach erklärt
Der Viewport ist der sichtbare Teil des Browserfensters abzüglich Scrollbalken, Adressleiste, Favoritenleiste und Taskleiste. Er entspricht dem Platz, der zur Anzeige Deiner Website zur Verfügung steht. Du solltest wissen, welche Viewports die Mehrheit Deiner User hat. So kannst Du testen, ob Deine Website mit diesen Viewports gut bedienbar ist.
Beispiel:
Bei einer normalen PC-Auflösung von 1920*1080 Pixeln (Full HD) beträgt der Viewport ca. 1903*927 Pixel. Grund: In der Breite wird ein Scrollbalken abgezogen. In der Höhe wird der Viewport durch Adressleiste, Favoritenleiste sowie unten die Windows-Taskleiste verringert.
So sieht der Viewport auf Mobile aus:
Auf Mobile entfällt der vertikale Scrollbalken, weil mit dem Finger gescrollt wird. Der Viewport ist deshalb im Hochformat immer so breit wie die Bildschirmgröße. Bei einer typischen Mobile-Bildschirmgröße von 360*780 beträgt der Viewport ca. 360*654 Pixel.
Während auf dem PC die Full-HD-Auflösung der Standard ist, gibt es auf Mobile unzählige Auflösungen. Deshalb gibt es nicht „den“ Mobile-Viewport, sondern sehr viele verschiedene. Auch bei derselben Auflösung ändert sich der Viewport durch Drehen des Handys deutlich:
Jetzt ist der Viewport auf dem Handy fast so breit wie auf einem Tablet im Hochformat. Die Adressleiste macht die Höhe kleiner, die Taskleiste rechts verringert die Breite. Aus der Bildschirmgröße 780*360 wird dann ein Viewport von 710*274 Pixeln.
Inhalt
Was sind die häufigsten Viewport-Größen?
Es gibt keine Statistiken zu den häufigsten Viewport-Größen, weil der Viewport je nach eingeblendeter Favoritenleiste, Scrollbalken etc. schwankt. Als Richtwert kannst Du die häufigsten Bildschirmgrößen in Deutschland nehmen (Stand Oktober 2022):
| Auflösung | Häufigkeit |
|---|---|
| 1920×1080 | 22,58 % |
| 390×844 | 5,52 % |
| 1536×864 | 4,29 % |
| 414×896 | 4,03 % |
| 375×812 | 3,24 % |
| 2560×1440 | 2,99 % |
| 360×800 | 2,77 % |
| 412×915 | 2,55 % |
| 1440×900 | 2,47 % |
| 1366×768 | 2,35 % |
| 375×667 | 2,01 % |
| 360×780 | 1,92 % |
| 393×873 | 1,89 % |
| 1280×720 | 1,69 % |
| 1600×900 | 1,65 % |
| 428×926 | 1,51 % |
| 800×600 | 1,5 % |
| 360×640 | 1,34 % |
| 810×1080 | 1,32 % |
| 1680×1050 | 1,26 % |
| Sonstige | 31,1 % |
Die häufigste PC-Auflösung ist 1920*1080 mit 22 %, gefolgt von der Mobile-Auflösung 390*844 mit 5 %. Dahinter folgt eine lange Liste an verschiedenen Auflösungen, größtenteils von Handys. Die größte Gruppe sind „Sonstige“ mit 31 %.
Faustregel: Auf Smartphones kannst Du heutzutage mindestens eine Viewport-Breite von 360 Pixeln voraussetzen. Schau zusätzlich in Google Analytics rein, weil die Auflösungen Deiner konkreten Nutzer abweichen können:
Rufe in Google Analytics den Bereich „Technologie“ => „Browser und Betriebssystem“ und dort „Bildschirmauflösung“ auf. Im Beispiel liegt eine Smartphone-Auflösung an erster Stelle, weil die Website hauptsächlich von Handy-Nutzern besucht wird.
Wie setze ich den Viewport im HTML Meta-Tag?
Baue dieses HTML-Tag in den <head>-Bereich Deiner Website ein:
Das Attribut name=“viewport“ kennzeichnet den Namen des Viewport-Tags. Mit width=device-width setzt Du den Viewport auf 100 %, d. h. die komplette Bildschirmbreite. Über initial-scale=1 legst Du fest, dass der Browser beim Aufruf der Website weder rein- noch rauszoomen soll.
Das macht Sinn, da eine für Smartphones optimierte Website so designt ist, dass die User Texte und Bilder auch ohne Zoom gut lesen können. Hat Deine Website noch kein Responsive Design, solltest Du initial-scale auf einen kleineren Wert setzen.
Beispiel:
Damit der Nutzer beim Aufruf der Seite die komplette Website sieht, zoomen wir ohne Responsive Design raus (links). Mit Responsive Design zeigen wir die Seite in voller Breite an (rechts). In beiden Fällen kann der User auf Wunsch die Zoomstufe verändern, indem er weiter rein- oder rauszoomt.
Wie gebe ich den Viewport im CSS an?
Füge diese Regel in Deine CSS-Datei ein:
Die Bedeutung ist dieselbe wie beim HTML-Tag: Mit width: device-width setzt Du die Viewport-Größe auf die komplette Bildschirmbreite. Mit zoom: 1 legst Du fest, dass nicht gezoomt werden soll.
Wie lese ich den Viewport per JavaScript aus?
Füge diese Codezeilen in Deinen JavaScript-Code ein:
Mit dem Befehl document.documentElement.clientWidth liest Du die Viewport-Breite aus und speicherst sie in der JavaScript-Variablen viewport_breite. Mit window.innerHeight liest Du die Viewport-Höhe aus und hinterlegst sie in der Variablen viewport_hoehe.
Wie teste ich meine Website für verschiedene Viewports?
Möchtest Du Deine Website für eine große Anzahl an Browsern, Betriebssystemen und User-Agents testen, empfehlen wir Dir Tools wie Browserstack. Du kannst aber auch einfach von Hand prüfen, wie Deine Website mit unterschiedlichen Viewports aussieht:
Drücke im Google Chrome oder Microsoft Edge die F12-Taste. Damit öffnen sich die Entwickler-Tools. Klicke jetzt auf das kleine Gerätesymbol. Nun kannst Du ein gewünschtes Gerät auswählen, um Deine Website mit unterschiedlichen Viewports zu testen. Im Mozilla Firefox funktioniert das auch, indem Du STRG + Umschalttaste + M drückst.
Wählst Du statt eines konkreten Geräts (z. B. Samsung Galaxy S8+) die Option „Responsive“, kannst Du die Bildschirmgröße frei eingeben. So kannst Du eine kleinere Breite bzw. Höhe angeben, um Dir das Aussehen Deiner Website anzusehen, wenn Adressleiste, Taskleiste etc. den Viewport verkleinern.
Weiterführende Links
- Häufigste Bildschirmgrößen in Deutschland
- Weitere Attribute des Viewport-Meta-Tags
- Weitere CSS-Regeln zum Viewport
Bildnachweis: PC-Viewport, Mobile-Viewport (Hoch- und Querformat), Auflösungen in Analytics, Viewport HTML-Tag: Seokratie; Initial-Scale-Beispiel: Deque University, Zalando; Viewport im CSS & JavaScript angeben, Viewports testen: Seokratie