Viewport-Screenshot

Ein Viewport-Screenshot erfasst nur den Teil einer Webseite, der im Browserfenster sichtbar ist, also den Viewport, in seiner aktuellen Größe und Scrollposition. Inhalte oberhalb oder unterhalb des sichtbaren Bereichs sind nicht enthalten. Die Bildgröße entspricht der Viewport-Größe multipliziert mit dem Skalierungsfaktor des Geräts, zum Beispiel 1920×1080 bei 1x oder 3840×2160 bei 2x.

In der Webentwicklung ist der Viewport der Bereich, in dem die Seite gerendert wird, gemessen in CSS-Pixeln. Er schließt Browser-Elemente wie die Tableiste und die Adressleiste aus. Ein Viewport-Screenshot zeigt die Seite daher so, wie Besucher sie zuerst sehen, ohne die umgebende Browseroberfläche.

Viewport-Screenshot und ganzseitiger Screenshot

Ein Viewport-Screenshot zeigt einen Bildschirm voll Inhalt, genau das, was Besucher beim Aufruf sehen. Ein ganzseitiger Screenshot rendert das gesamte Dokument von oben bis unten in einem Bild. Viewport-Aufnahmen sind kleiner, schneller und leichter zu vergleichen. Ganzseitige Aufnahmen zeigen alles, können aber sehr hoch werden und Layouts zerlegen, die auf die Viewport-Höhe ausgelegt sind.

Wo Viewport-Screenshots eingesetzt werden

• Prüfen des ersten Bildschirms einer Landingpage.
• Miniaturen und Linkvorschauen.
• Visuelle Regressionstests mit Fokus auf Kopfbereich und Hero-Bereich.
• Responsive-Prüfungen in festen Gerätegrößen.

Viewport-Größen und responsive Aufnahme

Die Viewport-Breite bestimmt, welches responsive Layout die Seite zeigt. Ein 390 Pixel breiter Viewport löst ein Smartphone-Layout aus, während 1920 ein Desktop-Layout zeigt. Website Capture in Temposhot bietet Desktop 1920×1080, Tablet 768×1024 und Mobile 390×844, wobei Area pro URL auf Viewport oder Full page gesetzt wird.

Häufige Fehler bei Viewport-Screenshots

• Aufnehmen, bevor die Seite fertig geladen oder animiert ist.
• Ein Cookie-Banner über dem Viewport stehen lassen.
• Erwarten, dass Inhalte unterhalb des sichtbaren Bereichs erscheinen.
• Aufnahmen mit unterschiedlichen Skalierungsfaktoren vergleichen.

Immer wieder dieselben Screenshots?

Fügen Sie die URLs in Website Capture ein, wählen Sie Viewport und ein Gerät und starten Sie einen Lauf mit bis zu 10 Concurrent browsers. Siehe Aufnahmeoptionen.

Häufige Fragen

Was bedeutet „above the fold“?

Den Inhalt, der ohne Scrollen sichtbar ist. Genau diesen zeigt ein Viewport-Screenshot.

Enthält ein Viewport-Screenshot die Adressleiste?

Nein. Er enthält nur die gerenderte Seite.

Quellen

• Viewport (MDN-Glossar)
• Playwright-Leitfaden zu Screenshots

Weiterführende Ressourcen

• Schnellstart für Website Capture: erster Lauf mit einer URL-Liste.
• Optionen für Website Capture: Einstellungen für Gerät, Bereich und Warten.
• Screenshot-Auflösungsprüfer: Bildgröße überprüfen.