Bildschirmauflösung

Diese Seite zeigt die Auflösung Ihres Bildschirms, die Größe des sichtbaren Bereichs im Browser, das Pixelverhältnis des Geräts und die Farbtiefe.

Alle Werte werden lokal ausgelesen und ändern sich live, wenn Sie das Fenster verkleinern.

Warum diese Zahlen nicht zum Datenblatt passen

Ein Telefon, das mit 2532×1170 beworben wird, meldet hier etwas nahe 844×390, und keine der beiden Zahlen ist falsch. Die beworbene sind physische Pixel. Womit der Browser arbeitet, sind CSS-Pixel — eine Einheit, die absichtlich von der Hardware gelöst wurde, damit Text auf einem dichten Bildschirm dieselbe reale Größe hat wie auf einem groben.

Das Pixelverhältnis des Geräts ist die Brücke dazwischen. Bei einem Verhältnis von 3 wird jeder CSS-Pixel mit einem Block aus 3×3 physischen Pixeln gezeichnet, 844 CSS-Pixel belegen also 2532 echte. Deshalb verhält sich ein Layout, das auf Haltepunkten in CSS-Pixeln beruht, auf beiden gleich, und deshalb muss ein Bild, das scharf wirken soll, in doppelter oder dreifacher CSS-Größe geliefert werden.

Welches Maß wofür

Der Bildschirm beschreibt das gesamte Gerät und taugt für die Webentwicklung fast nie, weil er das Fenster ignoriert. Der sichtbare Bereich dagegen ist die Fläche, in der Ihre Seite tatsächlich zeichnen kann: Er bestimmt Layout, Haltepunkte und Medienabfragen.

Der zu vermeidende Fehler ist, das Layout an der Bildschirmgröße auszurichten. Ein maximierter Browser auf einem 1920 Pixel breiten Monitor hat einen sichtbaren Bereich nahe 1920; derselbe Monitor mit zwei nebeneinanderliegenden Fenstern lässt jedem etwa 950, und ein Entwurf, der den Bildschirm befragt hat, richtet sich nach einer Breite, die er nicht hat. Ändern Sie die Fenstergröße und beobachten Sie, welche Zahlen sich bewegen.