Bildschirmgröße-Detektor

Referenz

Viewport vs. Bildschirmauflösung — was ist der Unterschied?

Der Viewport ist der sichtbare Bereich einer Webseite innerhalb des Browserfensters, gemessen in CSS-Pixeln (window.innerWidth × window.innerHeight). Er ändert sich, wenn du den Browser in der Größe veränderst oder die DevTools öffnest. Die Bildschirmauflösung ist die Gesamtpixelzahl deines physischen Displays (screen.width × screen.height) — diese wird von deiner Hardware und den Anzeigeeinstellungen festgelegt. Für responsives Webdesign ist der Viewport entscheidend — er bestimmt, welche CSS Media Queries und Breakpoints aktiv sind.

Was ist das Geräte-Pixelverhältnis (DPR)?

Das Geräte-Pixelverhältnis (DPR) gibt an, wie viele physische (Hardware-) Pixel einem CSS-Pixel entsprechen. Ein DPR von 1 bedeutet 1:1-Zuordnung (Standarddisplays). Ein DPR von 2 bedeutet ein Retina/HiDPI-Display — jedes CSS-Pixel wird mit 4 physischen Pixeln (2×2) gerendert, was schärferen Text und Bilder erzeugt. Ein DPR von 3 ist bei High-End-Smartphones üblich. Das ist relevant für: das Ausliefern von @2x/@3x-Bildern an Bildschirme mit hohem DPR, das Verständnis, warum Screenshots auf Retina-Displays die doppelte erwartete Auflösung haben, und das Debuggen von Layout-Problemen, die nur bei bestimmten DPR-Werten auftreten.

Anwendungsfälle für Bildschirmerkennung

Responsive Design testen — überprüfe, ob CSS-Breakpoints bei den richtigen Viewport-Breiten greifen, ohne die DevTools zu öffnen. Fehlermeldungen — teile exakte Viewport-Dimensionen, Bildschirmauflösung und DPR bei der Meldung von Anzeigeproblemen an Entwickler. Screenshot-Planung — kenne die genauen Dimensionen, bevor du Screenshots für Dokumentation oder App-Store-Einträge machst. Anzeigen- und Banner-Größen — überprüfe, ob Viewport-Dimensionen den erforderlichen Anzeigenplatzgrößen für Display-Werbung entsprechen.

Datenschutz

Bildschirmabmessungen werden lokal aus deinen Browser-APIs gelesen. Es werden keine Daten an einen Server gesendet.