Physische vs. logische Pixel: Interaktiver Leitfaden mit den echten Werten Ihres Bildschirms
Ihr Bildschirm — Live-Erkennung:
Sie stellen Ihren Monitor auf 3840×2160 ein, aber screen.width in JavaScript sagt 2560 (und screen.height sagt 1440). Sie machen einen Screenshot — 3840 Pixel breit. Sie schreiben width: 100px in CSS, und es wird als 200 physische Pixel gerendert. Was ist da los?
Ihr Bildschirm betreibt tatsächlich zwei Auflösungssysteme — physische Pixel (echte Hardware-Punkte) und logische Pixel (was Software für das Layout verwendet). Das Verhältnis dazwischen ist die Device Pixel Ratio (DPR), und sie beeinflusst jede einzelne Koordinate auf Ihrem Bildschirm. Ihre echten Werte stehen oben.
Kostenloses Bildschirmkoordinaten-Tool öffnenDie Werte Ihres Bildschirms — Live
Bevor wir in die Theorie eintauchen, hier die tatsächlichen Werte Ihres Bildschirms im Moment:
Diese Werte stammen direkt aus den APIs Ihres Browsers — kein Raten. Die „geschätzte" physische Auflösung wird als screen.width × DPR und screen.height × DPR berechnet; sie entspricht in den meisten Fällen der echten Hardware, kann aber durch GPU Virtual Super Resolution oder Browser-Zoom beeinflusst werden. Wenn die DPR 1,0 ist, sind Ihre physischen und logischen Pixel identisch. Ist sie höher, findet eine Transformation statt zwischen dem, was die Software sieht, und dem, was Ihr Bildschirm anzeigt. Nutzen Sie unser Bildschirmkoordinaten-Tool, um zu sehen, wie sich das auf Mauspositionen in Echtzeit auswirkt.
Was sind physische Pixel?
Ein physischer Pixel (auch Gerätepixel genannt) ist ein einzelner, echter Punkt auf Ihrer Bildschirmhardware. Er ist das kleinste adressierbare Element Ihres Displays. Auf einem LCD-Panel besteht jeder physische Pixel aus drei Subpixeln (Rot, Grün, Blau), die zusammen einen Farbpunkt erzeugen.
Die physische Auflösung Ihres Monitors verrät Ihnen genau, wie viele dieser Punkte er hat:
- Ein 1920×1080-Monitor hat 2.073.600 physische Pixel
- Ein 3840×2160-Monitor (4K) hat 8.294.400 physische Pixel
- Ein iPhone 15 Pro hat 2.556×1.179 physische Pixel auf einem 6,1-Zoll-Bildschirm
Physische Pixel ändern sich bei einem gegebenen Display nie. Ein 4K-Monitor hat immer 3840×2160 physische Pixel, unabhängig von Ihren Windows-Skalierungseinstellungen. Die Hardware ist fest.
Einen Vergleich, was unterschiedliche physische Pixelanzahlen für Koordinatensysteme bedeuten, finden Sie in unserem Leitfaden „Bildschirmauflösung im Vergleich".
Was sind logische Pixel (CSS-Pixel)?
Ein logischer Pixel (auch CSS-Pixel, geräteunabhängiger Pixel (DIP) oder Point auf macOS genannt) ist eine Maßeinheit, die Software für das Layout verwendet. Es handelt sich um eine Abstraktion — ein logischer Pixel ist nicht zwingend ein physischer Pixel.
Auf einem Standard-1080p-Monitor mit 100 % Skalierung gilt: ein logischer Pixel = ein physischer Pixel. Einfach. Aber auf einem Retina MacBook Pro mit DPR 2 entspricht ein logischer Pixel einem 2×2-Raster aus physischen Pixeln (insgesamt 4 physische Pixel). Auf einem Windows-4K-Display mit 150 % Skalierung entspricht ein logischer Pixel einem 1,5×1,5-Bereich physischer Pixel.
Warum es logische Pixel gibt: Ohne sie wäre ein Button mit 100×30 Pixeln auf einem 4K-Handybildschirm winzig (wo Pixel mikroskopisch klein sind), aber riesig auf einem 720p-Beamer. Logische Pixel ermöglichen es Entwicklern, width: 100px zu schreiben, und das Element erscheint auf jedem Gerät in einer ähnlichen physischen Größe — unabhängig von der Pixeldichte.
Visueller Vergleich — jedes farbige Quadrat ist ein physischer Pixel. Ein logischer Pixel wird je nach DPR auf unterschiedliche Raster abgebildet:
DPR 1 (1 CSS-Px = 1×1)
DPR 1,5 (1 CSS-Px = 1,5×1,5)
DPR 2 (1 CSS-Px = 2×2)
DPR 3 (1 CSS-Px = 3×3)
Device Pixel Ratio: Die Brücke zwischen physisch und logisch
Die Device Pixel Ratio (DPR) ist der Multiplikator, der zwischen logischen und physischen Pixeln umrechnet:
physische_Pixel = logische_Pixel × DPR
Beispiele (nur Breite):
1920 logisch × DPR 1.0 = 1920 physisch (Standard-1080p)
2560 logisch × DPR 1.5 = 3840 physisch (4K bei 150 % Skalierung)
1440 logisch × DPR 2.0 = 2880 physisch (MacBook Retina)In JavaScript können Sie Ihre DPR mit window.devicePixelRatio auslesen. Dieser Wert ist schreibgeschützt — er wird durch Ihre Display-Hardware und die Betriebssystem-Skalierung bestimmt.
DPR ist nicht immer eine ganze Zahl
Windows verwendet häufig gebrochene DPR-Werte: 1,25 (125 %), 1,5 (150 %), 1,75 (175 %). macOS nutzt exakt 2,0 für Retina-Displays. Android-Geräte verwenden verschiedene Werte (1,5, 2,0, 2,625, 3,0, 3,5, 4,0). Eine gebrochene DPR bedeutet, dass sich logische Pixel nicht sauber auf physische Pixel abbilden lassen — ein logischer Pixel kann Teile mehrerer physischer Pixel überdecken. Deshalb kann die Textdarstellung unter Windows bei 125 % Skalierung leicht verschwommen wirken.
Wie die DPR mit der DPI-Skalierung unter Windows interagiert und Automatisierungsskripte sabotiert, lesen Sie in unserem Leitfaden „DPI-Skalierung & Koordinaten".
DPR nach Gerät: MacBook, Windows, Android, iPhone
Gängige Geräte und ihre DPR-Werte:
| Gerät | Physische Auflösung | Logische Auflösung | DPR | 1 CSS-Pixel = |
|---|---|---|---|---|
| Standard-PC-Monitor (1080p) | 1920×1080 | 1920×1080 | 1,0 | 1 physischer Pixel |
| Windows 4K bei 150 % | 3840×2160 | 2560×1440 | 1,5 | 2,25 physische Pixel |
| Windows 4K bei 200 % | 3840×2160 | 1920×1080 | 2,0 | 4 physische Pixel |
| MacBook Pro 14" | 3024×1964 | 1512×982 | 2,0 | 4 physische Pixel |
| MacBook Pro 16" | 3456×2234 | 1728×1117 | 2,0 | 4 physische Pixel |
| iPad Pro 11" | 2388×1668 | 1194×834 | 2,0 | 4 physische Pixel |
| iPhone 15 Pro | 2556×1179 | 393×852 | 3,0 | 9 physische Pixel |
| Pixel 8 | 2400×1080 | 412×915 | ~2,625 | ~6,9 physische Pixel |
| Samsung Galaxy S24 | 2340×1080 | 360×780 | ~3,0 | 9 physische Pixel |
Muster erkennen: Apple hält sich an ganzzahlige DPR-Werte (2 oder 3). Windows nutzt gebrochene Werte (1,25, 1,5, 1,75) für eine feinere Skalierungssteuerung. Moderne Apps und Browser verarbeiten gebrochene DPR sauber mit Subpixel-Rendering — nur ältere, nicht-DPI-fähige Anwendungen werden per Bitmap gestreckt und sehen unscharf aus. Android variiert je nach Hersteller.
Was das für Bildschirmkoordinaten und Automatisierung bedeutet
Was heißt das nun in der Praxis?
- Automatisierungstools sind sich bei Koordinaten nicht einig. PyAutoGUI ohne DPI-Awareness verwendet logische Koordinaten; die Windows-API
GetCursorPosliefert physische (für DPI-fähige Prozesse). Werfen Sie beides durcheinander, ist jede Position um den DPR-Faktor verschoben. Die Lösung steht in unserem PyAutoGUI-Koordinaten-Leitfaden. - Screenshots erfassen physische Pixel. Auf einem 4K-Display mit 150 % Skalierung ist ein Screenshot 3840×2160 — nicht 2560×1440. Wollen Sie ein UI-Element anhand seiner logischen Koordinaten im Screenshot lokalisieren? Erst mit DPR multiplizieren.
- CSS-Koordinaten sind immer logisch. Setzen Sie
left: 100px; top: 200px, dann sind das logische Pixel — der Browser rechnet sie im Hintergrund in physische Pixel um. Deshalb liefertgetBoundingClientRect()CSS-Pixel zurück. - Multi-Monitor-Setups können gemischte DPR haben. Ein Retina-Laptopbildschirm (DPR 2) neben einem Standard-Externmonitor (DPR 1) bedeutet, dass dieselbe Koordinate auf jedem Display auf einen anderen physischen Punkt abgebildet wird. Unser Multi-Monitor-Koordinaten-Leitfaden geht darauf ein.
Schnellreferenz: Welches Koordinatensystem verwende ich gerade?
| Tool / API | Koordinatentyp | Gemeldete Auflösung |
|---|---|---|
| PyAutoGUI (Standard) | Logisch | Logisch (z. B. 2560×1440) |
| PyAutoGUI (mit SetProcessDPIAware) | Physisch | Physisch (z. B. 3840×2160) |
| AutoHotkey A_ScreenWidth | Logisch | Logisch |
| Windows GetCursorPos (DPI-fähig) | Physisch | Physisch |
| JavaScript screen.width/height | Logisch (CSS) | Logisch |
| JavaScript window.innerWidth | Logisch (CSS) | Logisch |
| CSS getBoundingClientRect() | Logisch (CSS) | N/A |
| macOS NSScreen (Quartz) | Points (logisch) | Points |
Häufig gestellte Fragen
Ist DPR dasselbe wie DPI?
Verwandt, aber unterschiedlich. DPI (dots per inch) misst die physische Pixeldichte — wie viele Pixel auf einen Zoll Bildschirmfläche passen. DPR (device pixel ratio) ist das Verhältnis von physischen zu logischen Pixeln. Ein hochauflösender Bildschirm kann eine DPR von 1 haben, wenn das Betriebssystem ihn nicht skaliert. DPR beschreibt die Software-Abbildung; DPI die Hardware-Dichte.
Warum sieht mein Retina Mac schärfer aus als mein 4K-Windows-PC?
macOS verwendet ganzzahlige DPR-Werte (2,0), was bedeutet, dass jeder CSS-Pixel exakt auf ein 2×2-Raster physischer Pixel abgebildet wird — eine saubere 4:1-Abbildung. Windows nutzt häufig gebrochene DPR-Werte (1,25, 1,5, 1,75), wodurch ein CSS-Pixel auf eine nicht-ganzzahlige Anzahl physischer Pixel abgebildet wird. Das führt zu Subpixel-Rendering-Artefakten und leichter Unschärfe in nicht-DPI-fähigen Anwendungen.
Kann ich meine DPR ändern?
Indirekt über die Betriebssystem-Skalierungseinstellungen. Unter Windows: Einstellungen → System → Anzeige → Skalierung und Layout. Unter macOS: Systemeinstellungen → Displays → „Standard" für native DPR oder „Skaliert" für eine andere logische Auflösung wählen. Unter Android: Einstellungen → Anzeige → Anzeigegröße / Schriftgröße (begrenzte Kontrolle). Die DPR ändert sich sofort, aber manche Anwendungen müssen neu gestartet werden, um die Änderung zu übernehmen.
Warum ändert sich window.devicePixelRatio zwischen Monitoren?
Wenn Sie Ihren Browser von einem Externmonitor mit DPR 1,0 auf einen Retina-Laptopbildschirm mit DPR 2,0 ziehen, aktualisiert sich window.devicePixelRatio auf die DPR des neuen Monitors. Sie können auf diese Änderung mit dem matchMedia('(resolution: ' + dpr + 'dppx)')-Change-Event lauschen. Das ist relevant für Webanwendungen, die gemischte DPI-Setups handhaben müssen.