inspector(s) pixeldichte, pixelangaben, cm .... Was bekomme ich eigentlich zu sehen? Äquivalenzdarstellungen?

[Rolf B]

Hallo michaah,

Pixel sind ein Problem auf Smartphones, weil Maßangaben in px einen bestimmten dpi-Wert des Displays implizieren, um zu lesbaren Ergebnissen zu führen. Bei Desktop-Bildschirmen war dieser Wert für lange Zeit relativ konstant zwischen 90 und 100. Auf einmal kommen die Retina-Displays mit 200 und mehr, und damit sind px Angaben ein Problem, weil man für font-size:16px auf einmal eine Lupe braucht.

Weil es aber noch genug Leute gibt (viel zu viele), die ihre Webseiten mit px bemaßen statt vw, %, em oder ähnlichem, musste man eine Krücke schaffen. Die Größe dieser Krücke findest Du in der Eigenschaft displayPixelRatio des Window Objekts, es ist das Verhältnis von Display-Pixeln zu CSS-Pixeln.

Auf meinem Non-Retina Desktop Oldtimer ist deren Wert 1, was bei 24" Diagonale 94,3dpi sind. Auf dem von Dir genannten iPhone beträgt die Pixeldichte bei angenommenen 6 Zoll Diagonale 217dpi. Also mehr als das Doppelte meines Monitors, allerdings ist der auch weiter weg von meiner Nase als ein iPhone. Deswegen dürfte das iPhone ein devicePixelRatio von 2 haben (ob es auch Geräte mit non-integer Werten gibt, weiß ich nicht).

Jedenfalls designst Du für die CSS Pixel, nicht für die Display Pixel. Deswegen ist es richtig, wenn der Browser Dir 320x568 anzeigt statt 640x1136.

Wenn Du deine Maße in em, rem oder % vergibst, kann der Browser das unter der Haube schön an die Display-Pixel anpassen. Die 320x568 sind für alle Maßangaben relevant, die der Anwender in px macht.

Rolf