monitor Wie hoch ist meine Bildschirmauflösung? star

Was das „Device Pixel Ratio" wirklich misst

Jedes Display hat ein festes Raster physischer Pixel — seine native Auflösung —, aber Webseiten werden in CSS-Pixeln layoutet, einer auflösungsunabhängigen Einheit. Das Device Pixel Ratio (DPR) ist der Umrechnungsfaktor zwischen beiden: wie viele physische Pixel ein einzelner CSS-Pixel zum Zeichnen verwendet. Auf einem Standarddichte-Bildschirm beträgt das DPR 1, und beide entsprechen sich eins zu eins. Auf einem „Retina"- oder High-DPI-Bildschirm liegt das DPR typischerweise bei 2 oder 3, was bedeutet, dass ein CSS-Pixel tatsächlich über einen 2×2-Block (4 physische Pixel) oder einen 3×3-Block (9 physische Pixel) gerendert wird. Deshalb wirken Text und Symbole auf diesen Bildschirmen deutlich schärfer: Betriebssystem und Browser haben vier- oder neunmal so viele physische Punkte zur Verfügung, um denselben logischen Pixel zu zeichnen, sodass Kurven und Kanten nicht so grob angenähert werden müssen.

Diese Seite liest diese Zahl, zusammen mit allem anderen auf der Karte oben, direkt aus echten Browser-APIs: window.screen meldet die native Breite, Höhe und Farbtiefe des Displays, während window.devicePixelRatio das Verhältnis von CSS- zu physischen Pixeln meldet. Die Browser-Viewport-Maße stammen von window.innerWidth/innerHeight, weshalb diese Zahl kleiner ist als die Bildschirmauflösung — sie schließt den Platz aus, den Tabs, die Adressleiste und Fensterränder einnehmen. Ändern Sie die Fenstergröße, und diese Werte aktualisieren sich live, weil sie direkt aus dem Browser gelesen werden und nicht zwischengespeichert sind.

Wo das nützlich ist

Typische Anwendungen sind: Ihr genaues Setup dem technischen Support beschreiben, ohne bei Zahlen zu raten; prüfen, mit welchen Pixelmaßen ein responsives Design auf Ihrem Gerät tatsächlich arbeiten muss; bestätigen, dass ein neu angeschlossener Monitor wirklich seine native Auflösung ausgehandelt hat statt eines niedrigeren Ausweichmodus; oder verifizieren, dass ein als zweites Display angeschlossener Fernseher das richtige Signal übernommen hat. Die Ein-Klick-Kopieren-Schaltfläche holt eine saubere Textzusammenfassung aller Werte, bereit zum direkten Einfügen in ein Support-Ticket oder einen Fehlerbericht.

Die Farbtiefe, ebenfalls auf der Karte gezeigt, funktioniert nach einem ähnlichen Pro-Kanal-Prinzip wie das Pixelverhältnis: Ein typisches 24-Bit-Display weist Rot, Grün und Blau jeweils 8 Bit zu, was etwa 16,7 Millionen mögliche Farben pro Pixel ergibt, während manche professionellen und HDR-Displays 30- oder 36-Bit-Tiefe für feinere Farbverläufe melden. Ausrichtung (Hoch- oder Querformat) und Touch-Unterstützung runden das Bild ab — beide werden live aus denselben window.screen- und navigator-Schnittstellen gelesen, statt aus Bildschirmmaßen erraten oder per User-Agent-Sniffing ermittelt zu werden.