Anleitung

Öffnen Sie die Seite. Die Werte werden sofort in Ihrem Browser ausgelesen.
Vergrößern oder verkleinern Sie das Fenster oder drehen Sie Ihr Gerät, um die aktualisierte Viewport-Größe und Ausrichtung zu sehen.
Mit „Alles kopieren“ können Sie die Details in einen Fehlerbericht oder eine Supportanfrage einfügen.

So funktioniert es

Browser geben Größen in CSS-Pixeln an, der Einheit, die Webseiten für das Layout verwenden. Bei Displays mit hoher Pixeldichte wird ein CSS-Pixel durch mehrere physische Pixel dargestellt. Das Device Pixel Ratio (DPR) gibt an, durch wie viele. Ein Smartphone mit den Angaben 390 × 844 und einem DPR von 3 hat ein Display mit etwa 1170 × 2532 Geräte-Pixeln. Auf Desktop-Geräten verändern sowohl der Browserzoom als auch die Anzeigeskalierung des Betriebssystems den DPR und die CSS-Größe. Ein Monitor mit 2560 × 1440 meldet daher bei einer Skalierung von 125 % die Größe 2048 × 1152.

Die Bildschirmauflösung umfasst das gesamte Display. Der verfügbare Bildschirmbereich schließt dauerhaft eingeblendete Elemente des Betriebssystems aus, etwa die Windows-Taskleiste oder die macOS-Menüleiste. Der Viewport ist der Bereich des Browserfensters, in dem die Seite angezeigt wird – ohne Symbolleisten, aber einschließlich einer eventuell vorhandenen Scrollleiste. Auf den Viewport reagieren CSS Media Queries wie min-width: 768px. Deshalb ist seine Größe entscheidend, wenn Sie responsive Layouts testen.

Farbschema und Einstellung für reduzierte Bewegung stammen von denselben CSS-Media-Features, mit denen Websites sich an Ihre Systemeinstellungen anpassen. Marken, Plattform und Mobilgerät werden über User-Agent Client Hints ermittelt, die nur Chromium-basierte Browser bereitstellen. Manche Browser runden diese Werte absichtlich oder geben feste Werte aus, um Fingerprinting zu erschweren. Daher stimmen sie möglicherweise nicht genau mit Ihrer Hardware überein.

Beispiele

Responsives Layout testen

Ein Layout wird auf dem Laptop eines Kollegen falsch dargestellt. Er kopiert die Gerätedetails. Daraus geht ein Viewport von 1280 × 649 bei einem DPR von 1,5 hervor. Stellen Sie in der Geräte-Symbolleiste Ihres Browsers denselben Viewport ein, um das Problem nachzustellen.

Bildgrößen auswählen

Ein Produktbild wird mit einer Breite von 400 CSS-Pixeln angezeigt. Auf einem Smartphone mit DPR 3 braucht es 1200 Pixel, damit es scharf aussieht. Daran erkennen Sie, welche Größen Sie in srcset angeben sollten.

Monitorskalierung prüfen

Ein Monitor mit 3840 × 2160 meldet 2560 × 1440 bei einem DPR von 1,5: Windows skaliert die Anzeige auf 150 %.

Häufig gestellte Fragen

Warum weicht die Bildschirmauflösung von den Angaben meines Monitors ab?

Browser geben CSS-Pixel an. Dabei werden die physischen Pixel durch den Skalierungsfaktor geteilt. Multiplizieren Sie den Wert mit dem Device Pixel Ratio, um die Hardwareauflösung ungefähr zu ermitteln. Auch der Browserzoom verändert den angezeigten Wert.

Was ist der Unterschied zwischen Bildschirmgröße und Viewport-Größe?

Die Bildschirmgröße umfasst das gesamte Display. Der Viewport ist nur der Bereich im Browserfenster, in dem die Seite dargestellt wird. Er ist daher kleiner und ändert sich, wenn Sie das Fenster vergrößern oder verkleinern oder die Entwicklertools öffnen.

Werden diese Informationen verwendet, um mich zu verfolgen?

Nicht durch diese Seite: Die Werte werden nur Ihnen angezeigt und weder gespeichert noch irgendwohin gesendet. Websites können dieselben Werte auslesen. Deshalb runden manche Browser sie, um Fingerprinting zu erschweren.

Warum wird auf meinem Laptop Touch-Unterstützung angezeigt?

Die Touch-Unterstützung basiert auf der Anzahl der Touch-Punkte, die der Browser meldet. Laptops mit Touchscreen melden diese auch dann, wenn Sie hauptsächlich eine Maus verwenden. Manche Treiber oder Remote-Desktop-Konfigurationen melden Touch-Unterstützung, obwohl kein Touchscreen vorhanden ist.

Datenschutz

Alle Werte werden mit JavaScript in Ihrem Browser ausgelesen und nur Ihnen angezeigt. Es wird nichts gespeichert, hochgeladen oder in Analysen erfasst. Lediglich ein anonymes Ereignis, dass das Tool geöffnet und verwendet wurde, wird aufgezeichnet.