Die obigen Zahlen stammen direkt aus den Screen- und Window-APIs des Browsers: logische Breite und Höhe, verfügbare Höhe abzüglich Taskleisten (sofern gemeldet), Farbtiefe, Pixeltiefe, Ausrichtung und devicePixelRatio. Ich habe einmal einen Bug bei einem 3440×1440 Ultrawide-Monitor gemeldet, bei dem Marketing-Screenshots die volle Panel-Auflösung nutzten, aber die Hero-Komponente window.innerWidth las, nachdem das DevTools-Dock 400px beansprucht hatte. Die Qualitätssicherung dachte daher, die Website unterstütze kein Ultrawide. Im Folgenden unterscheide ich physische Pixel von CSS-Pixeln, erkläre Skalierung und Zoom und zeige, wie Sie dieselben Werte aus dem Betriebssystem auslesen, wenn der Browser aus Datenschutzgründen falsche Werte liefert.
Physische Pixel, CSS-Pixel und devicePixelRatio
Physische Pixel (Gerätepixel) sind die tatsächlichen Hardware-Punkte auf Ihrem Display. CSS-Pixel sind das Koordinatensystem, das für das Layout verwendet wird. Ein CSS-Pixel kann je nach window.devicePixelRatio(DPR) einen, zwei oder drei physische Pixel abdecken. Hochauflösende Smartphones (HiDPI) werden oft mit DPR 2 oder 3 ausgeliefert, damit Text lesbar bleibt, ohne das Layout-Gitter zu verkleinern. Eine "CSS-Breite" von 390 auf einem iPhone bedeutet also nicht, dass der Bildschirm 390 physische Pixel breit ist.
Das Viewport ist der sichtbare Layoutbereich innerhalb des Browsers. Er ändert sich, wenn Sie zoomen, das Fenster teilen oder die Bildschirmtastatur auf Mobilgeräten öffnen. screen.width kommt der vom Display gemeldeten Auflösung am nächsten; window.innerWidth erfasst das Layout-Viewport, in das die Seite tatsächlich gerendert wird.
Wie diese Seite Bildschirmeigenschaften erkennt
Der Client-Code liest screen.width, screen.height, screen.availWidth, screen.availHeight, screen.colorDepth, window.devicePixelRatio und screen.orientation.type aus, sofern verfügbar. Einige Werte werden in datenschutzfreundlichen Browsern gerundet oder beschnitten. Remote-Desktops und virtuelle Maschinen melden möglicherweise die Auflösung des Gastsystems und nicht die des eigentlichen physischen Monitors.
Warum die Browser-Werte nicht mit den Herstellerangaben übereinstimmen
Die Skalierung des Betriebssystems (z. B. auf 125 %, 150 % oder 200 %) bildet logische Desktopeinheiten auf weniger physische Pixel ab, um die Benutzeroberfläche lesbarer zu machen. Der Browser-Zoom (Strg/Cmd + Plus) verkleinert das CSS-Viewport, ohne die Monitor-Hardware zu ändern. Nicht-native Bildschirmmodi (z. B. 1080p auf einem 4K-Panel) melden den aktiven Modus, nicht das Maximum des Panels. Externe Dockingstationen senden manchmal fehlerhafte EDID-Daten, bis ein Firmware-Update durchgeführt wird.
Gängige Bildschirmmodi im Jahr 2026
| Name | Typische Auflösung | Seitenverhältnis | Typische Verwendung |
|---|---|---|---|
| 1080p (FHD) | 1920 × 1080 | 16:9 | Günstige Laptops, Zweitmonitore |
| 1440p (QHD) | 2560 × 1440 | 16:9 | Produktivitäts-Standard an vielen Arbeitsplätzen |
| 4K UHD | 3840 × 2160 | 16:9 | Kreativarbeit, scharfer Text bei nativer Skalierung |
| 5K (iMac-Klasse) | 5120 × 2880 | 16:9 | Foto- und Videobearbeitung |
| 8K UHD | 7680 × 4320 | 16:9 | High-End-Grading, digitale Beschilderung |
| 21:9 Ultrawide (1440p hoch) | 3440 × 1440 | 21:9 | Timeline-UIs, Trading-Desks |
Gegenprüfung über Systemeinstellungen und Terminal
Wenn die Angaben im Browser fehlerhaft erscheinen, prüfen Sie, was das Betriebssystem für das Display erkennt.
- Windows: Einstellungen → System → Bildschirm → Bildschirmauflösung.
- macOS: Systemeinstellungen → Displays → Auflösung.
# Linux (X11 / viele Wayland-Sitzungen)
xrandr --query
# Hyprland
hyprctl monitorsRetina, HDR und warum Barrierefreiheit vor reiner Pixelzahl geht
Apple hat den Begriff Retina als Marketingbezeichnung für einen "DPR, der so hoch ist, dass einzelne Pixel bei normalem Betrachtungsabstand verschwinden" etabliert. Es handelt sich nicht um ein separates API-Flag, sondern um einen hohen DPR in Kombination mit optimierter Typografie. Benutzer vergrößern Text über den Browser-Zoom oder die Betriebssystem-Skalierung; Breakpoints sollten min-width in CSS-Pixeln verwenden und prefers-reduced-motion berücksichtigen, anstatt von einem festen 1920er-Layout auszugehen.
Häufig gestellte Fragen
Was ist the Unterschied zwischen Bildschirmgröße und Auflösung?
Die Größe ist die physische Diagonale des Panels in Zoll. Die Auflösung ist das Pixelgitter (z. B. 2560×1440). Zwei 27-Zoll-Monitore können unterschiedliche Auflösungen und unter der Skalierung des Betriebssystems verschiedene DPR aufweisen.
Was bedeutet Device Pixel Ratio?
Es ist das Verhältnis von physischen Pixeln zu CSS-Pixeln. Ein DPR von 2 bedeutet, dass ein CSS-Pixel auf ein Quadrat aus 2×2 physischen Pixeln abgebildet wird. Rastergrafiken benötigen höhere Ausgangsabmessungen, um auf Bildschirmen mit hohem DPR scharf zu bleiben.
Warum zeigt mein Browser eine geringere Auflösung an als mein Monitor?
Sie lesen wahrscheinlich innerWidth / innerHeight (Viewport) aus oder verwenden eine Skalierung des Betriebssystems. Die volle Bildschirmbreite liegt näher an screen.width multipliziert mit dem Verhältnis von CSS- zu physischen Pixeln (DPR), was ebenfalls durch den Zoom beeinflusst wird.
Was ist ein Retina-Display?
Ein Marketingbegriff für hochauflösende Displays, bei denen Text und Benutzeroberfläche so fein gerendert werden, dass Pixel aus normalem Betrachtungsabstand nicht mehr erkennbar sind. Technisch gesehen handelt es sich weiterhin um ein LCD- oder OLED-Display mit einem höheren DPR.
Wie ändere ich meine Bildschirmauflösung?
Nutzen Sie die oben beschriebenen Bildschirmeinstellungen des Betriebssystems. Wählen Sie nach Möglichkeit die native Auflösung des Monitors, um das schärfste Bild zu erhalten. Spiele können die Auflösung unabhängig vom Desktop-Modus ändern.
Verwandte Tools
GPU- und WebGL-Informationen: Was ist mein WebGL / GPU. Browsername und Engine: Was ist mein Browser. Roher User-Agent-String: Was ist mein User Agent.
Quellenangaben
- CSSOM View Module: Viewport- und Fensterabmessungen
- MDN: Screen (Bildschirm)
- Media Queries Level 5: Umgebungsvariablen wie safe-area-inset