Bildschirm- & Browser-Info

Bildschirmauflösung, Fenstergröße, Browser und Gerätedetails in Echtzeit anzeigen

Was ist das und wie funktioniert es?

Bildschirminformationen — Auflösung, Pixeldichte, Gerätepixelverhältnis, Farbtiefe, Ausrichtung und Viewport-Dimensionen — sind wesentlicher Kontext für responsives Webdesign und die Fehlersuche bei Anzeigeprobleme. Ein "2560×1440"-Monitor mit 2× Gerätepixelverhältnis hat einen CSS-Viewport von 1280×720 Pixeln.

Dieses Tool liest die Screen- und Window-APIs des Browsers und zeigt Auflösung, Viewport-Dimensionen, DPR, Farbtiefe und Ausrichtung an.

Anwendungsfälle

• HiDPI-Debugging: Wenn Bilder auf einem MacBook Pro unscharf aussehen, DPR prüfen — typischerweise 2. Bilder müssen in 2× CSS-Größe bereitgestellt werden.
• Responsiver Breakpoint-Test: Aktuellen Viewport-Breite prüfen, um sicherzustellen, dass CSS-Breakpoints bei den richtigen Größen auslösen.
• QA-Verifikation: Wenn ein Kunde einen Layoutfehler "auf Mobil" meldet, genaue Bildschirmmaße mit diesem Tool ermitteln.

Häufige Fragen

Was ist das Gerätepixelverhältnis (DPR)?

DPR ist das Verhältnis physischer Pixel zu CSS-Pixel. DPR 2 (Retina/HiDPI) = 4 physische Pixel pro CSS-Pixel. Bilder bei 100px CSS-Breite benötigen 200px Bildbreite für Schärfe.

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

Bildschirmauflösung ist die Gesamtauflösung des Monitors in CSS-Pixeln. Viewport-Größe ist der sichtbare Browserbereich ohne Werkzeugzeilen. Media Queries nutzen Viewport-Dimensionen.

Was ist Farbtiefe?

24-Bit (8 Bit für R, G, B) ist Standard, unterstützt 16,7 Millionen Farben. Für Webdesign ist Farbtiefe selten relevant.

Wie teste ich verschiedene Bildschirmgrößen ohne echtes Gerät?

Browser-Devtools (F12) → Toggle Device Toolbar ermöglicht Simulation beliebiger Viewport-Größen und DPR mit Presets für iPhone, iPad, Pixel, Galaxy.

Dienstprogramme

Passwort-Generator · QR-Code-Generator · Stoppuhr · Countdown-Timer · Rechner · Zufallszahlen-Generator