Ein kleiner Exkurs

Dein Viewport - das unbekannte Wesen

Sichtfenster: Der Viewport ist die im Monitor sichtbare Fläche des Browsers.

 

Device-Pixel-Ratio

 

Device-Pixel-Ratio (Geräte-Pixel-Verhältnis) ist das Verhältnis der physikalischen zu den logischen Pixeln. Sie beschreibt also die Anzahl der tatsächlichen Pixel des Ausgabegeräts pro Pixel auf der Webseite.

Wir unterscheiden folgende Pixelangaben:

• CSS-Pixel: Ist die Pixelgröße, in der das Bild dargestellt wird. Die CSS-Pixel definieren also die dargestellte Fläche auf der Website.
• Bild-Pixel: Anzahl der Pixel, die ein Bild tatsächlich hat (z.B. 800×460).
• Device-Pixel: Tatsächliche Pixel des Device-Bildschirms, auf denen das Bild dargestellt wird.

 

Beispiel 1: CSS-Pixel = Bild-Pixel = Device-Pixel (Normalfall)

 

In unserem Beispiel entsprechen die Angaben zu HTML-/CSS-Pixel genau den Bild-Pixeln. Die Darstellung ist optimal, denn jede Information kann genau einem entsprechende Device-Pixel zugeordnet werden.

 

Beispiel 2: Bild mit normaler Größe (3×1) auf Retina-Display (6×2) = unscharf

 

Der Unterschied beim hochauflösenden Retina-Display liegt darin, dass die Auflösung doppelt so hoch ist. Dies bedeutet, dass die Device-Pixel in diesem Beispiel bei 6×2 Pixel liegen. Hat das Bild weiterhin nur 3×1 Pixel, so wird die feinere Auflösung des Displays gar nicht genutzt. Es sind nicht genügend Bildinformationen vorhanden. Jeder Bildpixel wird lediglich auf 4 Devicepixel verteilt, das Bild wirkt auf dem Retina-Display unscharf.

 

Beispiel 3: Das Bild mit genügend Auflösung auf Retina-Displays = scharf

 

Beispiel 3: Retina-Display Im dritten Beispiel hat unsere Bilddatei jetzt ebenfalls eine höhere Auflösung, nämlich: 6×2 Pixel. Jetzt sind Bild-Pixel und Device-Pixel identisch, so dass das Bild wieder optimal und scharf dargestellt wird.

 

Fazit

• CSS-Pixel können von Device-Pixeln abweichen.
• Bilder immer dann ideal dargestellt , wenn gilt „Bild-Pixel = Device-Pixel“.