CSS-Pixel vs. physische Pixel

CSS-Pixel sind logische Einheiten, die von Browsern und Designsystemen verwendet werden. Physische Pixel sind die tatsächlichen Hardwarepunkte auf einem Display. Auf modernen Geräten stimmen diese Werte oft nicht überein, weshalb eine Koordinate falsch aussehen kann, wenn man verschiedene Werkzeuge vergleicht, ohne die Skalierung zu berücksichtigen.

Wenn Sie Schnittstellen erstellen, Screenshots überprüfen oder Klickziele überprüfen, müssen Sie wissen, ob Ihre Koordinatenwerte an die Anzeigelogik oder Hardwarepixel gebunden sind.

Warum der Unterschied wichtig ist

Ein Browser kann CSS-basierte Positionen melden, während das Gerät selbst mit einer dichteren physischen Auflösung rendert. Das bedeutet, dass derselbe sichtbare Punkt je nach gewähltem Messmodus unterschiedliche Koordinatenwerte erzeugen kann.

Einfaches Beispiel

Für den Browser sieht ein Bildschirm möglicherweise 1000 Pixel breit aus, tatsächlich ist er jedoch 2000 physische Pixel breit. In diesem Fall kann ein Punkt, der bei X=500 in CSS-Pixeln gemeldet wird, ungefähr X=1000 in physischen Pixeln entsprechen.

• Verwenden Sie den Anzeigemodus, wenn Ihnen das Verhalten des Browsers oder des UI-Layouts am Herzen liegt.
• Verwenden Sie den nativen Modus, wenn Ihnen die tatsächliche Bildschirmdichte oder die Positionen auf Hardwareebene wichtig sind.
• Dokumentieren Sie, welchen Modus Sie beim Teilen von Koordinatenwerten verwendet haben.

Verwandte Leitfäden

Öffnen Sie das Tool | Wie sich die DPI-Skalierung auf Koordinaten auswirkt | Bildschirmkoordinaten für Mac