Bildschirm-Info

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. Die Viewport- und Ausrichtungswerte aktualisieren sich in Echtzeit, während du das Fenster in der Größe veränderst. Das macht das Tool zu einem praktischen Begleiter für Responsive-Design-Tests und schnelle Gerätechecks.

Die Karten lesen

Neun Karten füllen sich beim Laden der Seite automatisch; es gibt nichts einzutippen oder einzufügen. R zeigt die Bildschirmauflösung mit dem vereinfachten Seitenverhältnis, A die verfügbare Größe, V den live gemessenen Viewport, P das Device Pixel Ratio, C die Farbtiefe, O die Ausrichtung, T die Touch-Unterstützung, L die Browsersprache und Z die IANA-Zeitzone.

Viewport und Ausrichtung sind die einzigen live berechneten Karten: Sie werden bei jedem Resize neu bestimmt. Alle übrigen beschreiben Display und Umgebung und bleiben stabil, solange das Fenster nicht auf einen Monitor mit anderen Eigenschaften wandert. Alle Werte stammen aus den Standardobjekten window, screen und navigator, sodass keine Netzwerkanfrage nötig ist.

Die Karte Farbtiefe gibt Bits pro Pixel an — 24 Bit ist der übliche True-Color-Wert, während 30 oder 32 Bit auf ein Display mit größerem Farbraum oder HDR hindeuten. Die Karte Sprache zeigt die oberste Accept-Language-Präferenz des Browsers und hilft zu verstehen, warum eine Seite jemandem Deutsch ausliefert, der Englisch erwartet hatte. Die Karte Zeitzone nennt die IANA-Zone, die die Intl-API auf diesem Gerät zur Datumsformatierung verwenden wird.

Praktische Tipps

• Responsive-Tests: Ziehe die Fensterkante und beobachte, wie die Viewport-Breite deine Breakpoints überschreitet. So findest du Regeln, die unter OS-Skalierung bei der falschen CSS-Breite greifen.
• HiDPI-Assets: Lies den DPR, bevor du zwischen 1x-, 2x- und 3x-Bildvarianten wählst, und bedenke, dass srcset gegen die CSS-Slot-Größe misst.
• Bug-Reports: Füge exakte Auflösung, Viewport, DPR und OS-Skalierung ein, damit ein Layoutproblem reproduziert statt geraten werden kann.
• Cross-Device-QA: Vergleiche Ausrichtung und Touch-Ergebnis auf Laptop, Tablet und Smartphone nebeneinander.
• Lokalisierungs-Checks: Bestätige Sprache und Zeitzone, die eine Seite sehen wird, bevor du einen Formatierungsfehler deinem Code anlastest.

Auflösung, verfügbare Größe und Viewport

Diese drei Zahlen beschreiben unterschiedliche Rechtecke, und wer sie verwechselt, baut echte Bugs.

Die Bildschirmauflösung ist das, was das Display in geräteunabhängigen Pixeln meldet. Die verfügbare Größe zieht Betriebssystem-Oberflächen wie die Windows-Taskleiste oder Menüleiste und Dock unter macOS von der vollen Bildschirmgröße ab — sie ist die größte Fläche, die ein maximiertes Fenster einnehmen kann. Der Viewport ist noch kleiner: Er ist die zeichenbare Fläche innerhalb des Browserfensters und der einzige Wert, den CSS-Media-Queries messen können.

Ein maximiertes Fenster auf einem 1920 × 1080 großen Windows-Display mit 40 Pixel hoher Taskleiste meldet eine verfügbare Höhe von 1040, und der Viewport ist wegen der Browser-Oberfläche noch kleiner. Ein responsives Layout muss auf den Viewport abzielen — genau deshalb hält dieses Tool diesen Wert live, während es die Hardware-Zahlen daneben anzeigt.

devicePixelRatio und Asset-Auswahl

devicePixelRatio (DPR) ist die Anzahl physischer Pixel, die ein CSS-Pixel abdecken. Ein Wert von 2 bedeutet ein Retina-Display, bei dem eine CSS-Fläche von 1440 × 900 auf 2880 × 1800 physischen Pixeln gezeichnet wird. Ein Wert von 1,25 entsteht durch 125 % OS-Skalierung auf einem Panel mit Standarddichte.

Bei Bildern bestimmt der DPR, welche Quelle du ausliefern solltest: Ein 400 Pixel breiter Anzeigeplatz braucht ein 400-Pixel-Asset bei DPR 1, ein 800-Pixel-Asset bei DPR 2 und ein 1200-Pixel-Asset bei DPR 3. Browser nutzen dieses Verhältnis beim Auflösen von srcset, sodass ein korrekt geschriebenes srcset mit 1x-, 2x- und 3x-Kandidaten dem Browser die Wahl der schärfsten sinnvollen Datei überlässt.

Praxisbeispiel: Ein Retina-Laptop und ein skalierter Windows-PC

Auf einem 13-Zoll-Laptop mit 2560 × 1600 Panel bei DPR 2 melden die Karten Bildschirm 1280 × 800, Seitenverhältnis 8:5 und physisch 2560 × 1600 nach Multiplikation mit dem Verhältnis. Ist der maximierte Viewport 1280 × 720, lautet die Ausrichtung Querformat, und eine Regel @media (max-width: 768px) greift nicht, eine Regel max-width: 1200px dagegen schon.

Auf einem 1920 × 1080 Windows-Rechner mit 125 % Skalierung melden die Karten Bildschirm 1536 × 864 mit DPR 1,25. Dieselbe 768-Pixel-Media-Query greift weiterhin nicht, obwohl der Monitor größer ist als der des Laptops — weil die Query CSS-Pixel sieht, nicht das Panel. Änderst du den OS-Zoom auf 150 %, sinkt die gemeldete Breite auf 1280 und kann plötzlich Tablet-Breakpoints auslösen. Das ist eine häufige Ursache für den Satz „Auf dem Rechner meiner Kollegin sieht es anders aus“.

Genauigkeit und Grenzen

Die Werte sind exakt das, was der Browser preisgibt, und Browser begrenzen Details bewusst, um Fingerprinting zu erschweren. Manche Browser runden screen-Abmessungen oder schränken sie unter strengen Datenschutzeinstellungen ein, sodass eine gemeldete Auflösung ungefähr sein kann. Browser-Zoom verändert Viewport und DPR, also stelle vor dem Vertrauen in die Zahlen auf 100 % zurück.

Die Touch-Erkennung ist eine Fähigkeitsprüfung mit bekannten Fehlalarmen auf Touchscreen-Laptops; sie sagt nicht, ob ein Finger der primäre Zeiger ist. Die Sprachkarte zeigt navigator.language, die oberste Präferenz des Nutzers, nicht die vollständige geordnete Liste. Die Zeitzone stammt aus der aufgelösten Zone der Intl-API und ist meist ein IANA-Name, obwohl einige Plattformen einen Alias zurückgeben. Die verfügbare Größe garantiert schließlich nicht, dass ein Fenster sie tatsächlich erreicht — Fenstermanager können zusätzlichen Platz reservieren.

Verwandte Tools

• User-Agent-Parser
• Seitenverhältnis-Rechner
• Bildgröße ändern
• IP-Adressen-Lookup