CSS-Pixel vs. Physische Pixel: Technischer Leitfaden zu DPI-Skalierung & Retina

CSS-Pixel vs. Physische Pixel: Der Unterschied

Physische Pixel sind die tatsächlichen, mikroskopischen LED- (oder OLED-) Punkte auf Ihrem Monitor-Panel. Ein 4K-Display mit 3840 x 2160 hat exakt 8.294.400 physische Pixel. Desktop-Automatisierungstools wie AutoHotkey und PyAutoGUI arbeiten ausschließlich in diesem physischen Pixelraum.

CSS-Pixel in physische Pixel umrechnen

CSS-Pixel sind eine Abstraktion von Webbrowsern, um Text über Geräte hinweg lesbar zu halten. Ohne CSS-Pixel wäre eine 16px-Schrift auf einem 4K-Smartphone mikroskopisch klein.

• Standard-Desktop-Monitor (96 DPI): 1 CSS-Pixel = 1 physischer Pixel
• Apple Retina MacBook (220+ DPI): 1 CSS-Pixel = 4 physische Pixel (2x2 Block)
• Modernes Flaggschiff-Smartphone (450+ DPI): 1 CSS-Pixel = 9+ physische Pixel

In JavaScript lesen Sie den aktuellen Wert mit window.devicePixelRatio. Ein Standard-Monitor gibt 1 zurück, ein MacBook Pro gibt 2 zurück.

Device Pixel Ratio (DPR) erklärt

Das Device Pixel Ratio ist die Brücke zwischen CSS-Pixeln und physischen Pixeln. Es beantwortet die Frage: "Wie viele physische Pixel ergeben ein CSS-Pixel?"

// JavaScript
const dpr = window.devicePixelRatio; // z.B. 1, 1.25, 1.5, 2, 3
const cssWidth  = window.innerWidth;
const physWidth = cssWidth * dpr;

Die Formeln:

Physische Koordinate = CSS-Koordinate × Device Pixel Ratio
CSS-Koordinate       = Physische Koordinate / Device Pixel Ratio

Bruchteil-DPR-Werte

DPR ist nicht immer eine ganze Zahl. Windows-Laptops verwenden häufig 125%-Skalierung, was einen DPR von 1,25 ergibt. Für Automatisierungszwecke runden Sie physische Koordinaten immer auf die nächste Ganzzahl.

Wie DPI-Skalierung Bildschirmkoordinaten unter Windows beeinflusst

Moderne Laptops packen oft 1080p oder 4K in 13- oder 14-Zoll-Panels. Bei nativem 1:1-Scaling wäre der Text unlesbar klein. Betriebssysteme lösen dies durch DPI-Skalierung.

Wie Windows mit Skalierung umgeht

Windows bietet Skalierungsoptionen wie 100%, 125%, 150% und 200%. Bei 125% teilt Windows Anwendungen mit, der Bildschirm sei kleiner als in Wirklichkeit. Ein 1920 x 1080-Monitor meldet bei 125% eine logische Auflösung von 1536 x 864.

• System (DPI-unaware): Die App denkt, der Bildschirm sei 1536 x 864. Windows skaliert das gesamte Fenster.
• System (DPI-aware): Die App kennt die echte Auflösung, rendert aber größere UI-Elemente.
• Per-Monitor DPI-aware: Die App behandelt jeden Monitor in einem Multi-Display-Setup unabhängig.

Wie macOS mit Skalierung umgeht

macOS verwendet einen anderen Ansatz. Ein Retina MacBook Pro mit nativer Auflösung von 2880 x 1800 verwendet standardmäßig einen "Sieht aus wie 1440 x 900"-Modus. Das System rendert den Desktop bei 2880 x 1800, präsentiert ihn aber als 1440 x 900.

Bildschirmkoordinaten auf Retina- & HiDPI-Displays

Die meisten Programmiersprachen lesen standardmäßig die logische Auflösung. Ein 1920 x 1080-Bildschirm mit 125%-Skalierung wird von Python's PyAutoGUI möglicherweise als 1536 x 864 gesehen.

Windows-Fix (Python + PyAutoGUI)

import ctypes
import pyautogui

# DPI-Awareness VOR pyautogui deklarieren
ctypes.windll.user32.SetProcessDPIAware()

width, height = pyautogui.size()
print(f"Physische Bildschirmgröße: {width}x{height}")
pyautogui.click(x=960, y=540)

Windows-Fix (AutoHotkey v2)

#Requires AutoHotkey v2.0
DllCall("SetProcessDPIAware")
width := A_ScreenWidth
height := A_ScreenHeight
Click(960, 540)

macOS-Fix

# macOS: Logische Punkte zu physischen Pixeln
logical_x, logical_y = 720, 450
backing_scale = 2.0  # Normalerweise 2.0 auf Retina Macs
physical_x = int(logical_x * backing_scale)
physical_y = int(logical_y * backing_scale)

Plattformspezifische Lösungen

Browser-Zoom vs. OS-Skalierung

Diese beiden Konzepte werden oft verwechselt, beeinflussen aber Koordinaten auf völlig unterschiedliche Weise.

OS-Display-Skalierung

OS-Skalierung ändert global die Beziehung zwischen CSS-Pixeln und physischen Pixeln. Sie betrifft jede Anwendung im System.

Browser-Zoom

Browser-Zoom (Ctrl + Plus) ändert die Größe eines CSS-Pixels relativ zum Viewport, ohne die OS-Skalierungsschicht zu berühren. Chrome bei 150% Zoom erhöht window.devicePixelRatio um 1,5x.

Schnellreferenz-Tabelle