Bildschirm-Info
Deine Live-Werte für Bildschirm, Viewport und Gerät auf einen Blick
-
Seitenverhältnis: -
-
-
Aktualisiert sich live beim Ändern der Fenstergröße
-
-
-
-
-
-
Sieh sofort deine Bildschirmauflösung, die live aktualisierte Viewport-Größe, devicePixelRatio, Farbtiefe, Ausrichtung, Touch-Unterstützung, Sprache und Zeitzone — alles lokal aus deinem Browser gelesen, ohne Uploads. Viewport und Ausrichtung aktualisieren sich in Echtzeit beim Ändern der Fenstergröße, was das Tool zu einem praktischen Begleiter für Responsive-Design-Tests und schnelle Gerätechecks macht.
So verwendest du das Tool
- Seite öffnen: Alle Werte werden automatisch erkannt — nichts einzugeben.
- Raster lesen: Jede Karte zeigt eine Kennzahl mit kurzer Beschriftung.
- Fenster verkleinern/vergrößern: Viewport-Größe und Ausrichtung aktualisieren sich live.
- Werte nutzen: Auflösungen oder Seitenverhältnisse in dein Design-Tool, den Bug-Report oder die Media Query kopieren.
Funktionen
- Bildschirmauflösung mit vereinfachtem Seitenverhältnis (16:9, 4:3, …)
- Verfügbare Bildschirmgröße — volle Auflösung minus Taskleisten und Docks
- Live-Viewport-Größe, aktualisiert bei jeder Fensteränderung
- devicePixelRatio zur Erkennung von Retina/HiDPI
- Farbtiefe in Bits pro Pixel
- Ausrichtung wechselt beim Resize zwischen Quer- und Hochformat
- Touch-Erkennung aus drei unabhängigen Signalen
- Browsersprache und IANA-Zeitzone
- 100 % clientseitig — nichts verlässt deinen Browser
Auflösung, Viewport und verfügbare Größe im Vergleich
Diese drei Zahlen beschreiben unterschiedliche Rechtecke, und wer sie verwechselt, baut echte Bugs. Die Bildschirmauflösung ist die Hardware: so viele physische Pixel hat das Panel. Die verfügbare Größe bleibt übrig, nachdem das Betriebssystem Taskleisten und Menüleisten abgezogen hat. Der Viewport ist noch kleiner — der darstellbare Bereich innerhalb des Browserfensters, in dem die Seite lebt, und der einzige, den CSS-Media-Queries sehen. Ein responsives Layout muss auf den Viewport abzielen, nicht auf die Geräteauflösung — genau deshalb zeigt dieses Tool beide Werte nebeneinander und hält den Viewport-Wert live.
Anwendungsfälle
- Responsive Design: Die Live-Viewport-Breite beim Ziehen der Fensterkante gegen deine Breakpoints prüfen.
- HiDPI-Assets: devicePixelRatio ablesen, um zwischen 1x-, 2x- und 3x-Bildvarianten zu wählen.
- Bug-Reports: Exakte Auflösung, Seitenverhältnis und DPR einfügen, damit andere das Layoutproblem reproduzieren können.
- Geräteübergreifende QA: Ausrichtungs- und Touch-Erkennung auf Laptops, Tablets und Smartphones verifizieren.
- Lokalisierungs-Checks: Browsersprache und Zeitzone prüfen, die eine Seite sehen wird.
Verwandte Tools
Häufig gestellte Fragen
Warum unterscheidet sich meine Bildschirmauflösung von der Viewport-Größe?
Die Bildschirmauflösung ist die physische Größe deines Displays in Pixeln (screen.width × screen.height). Der Viewport ist der Bereich im Browserfenster, der die Seite tatsächlich rendert — ohne Symbolleisten, Scrollbars und Fensterrahmen — und ändert sich bei jeder Fenstergrößenänderung.
Was bedeutet devicePixelRatio?
devicePixelRatio gibt an, wie viele physische Pixel einem CSS-Pixel entsprechen. Ein Wert von 2 bedeutet ein Retina-ähnliches Display: Ein CSS-Viewport von 1920 × 1080 wird durch 3840 × 2160 physische Pixel dargestellt. Designer nutzen den Wert, um zu entscheiden, wann @2x- oder @3x-Bilder ausgeliefert werden.
Was ist der Unterschied zwischen Bildschirmgröße und verfügbarer Größe?
Die verfügbare Größe (screen.availWidth × availHeight) zieht Betriebssystem-Elemente wie die Windows-Taskleiste oder die macOS-Menüleiste und das Dock von der vollen Bildschirmgröße ab. Es ist der größte Bereich, den ein maximiertes Fenster einnehmen kann.
Wie wird Touch-Unterstützung erkannt?
Das Tool prüft drei Signale: navigator.maxTouchPoints, das Vorhandensein des ontouchstart-Events und die Media Query (pointer: coarse). Sobald eines davon positiv ist, gilt das Gerät als touchfähig — darum zeigen viele 2-in-1-Laptops Touch an, obwohl man meist mit der Maus arbeitet.
Werden meine Gerätedaten irgendwohin gesendet?
Nein. Alle Werte werden lokal aus den window- und screen-Objekten deines Browsers gelesen. Nichts wird hochgeladen, protokolliert oder an einen Server übertragen.