- Lernziele
- Den Unterschied von effektiver Bildschirmgrösse und physikalischer Auflösung kennen.
- Den Begriff Device Ration und dessen Funktion kennen.
- Das Konzept der relativen Masseinheiten kennen und in Grundzügen anwenden können.
- Den Grund beschreiben können, weshalb flexible Masseinheiten für Bildschirmanwendungen verwendet werden.
Bei der Angabe von Pixel als Grössenangabe gilt es zu unterschieden zwischen:
der Definition der effektive Pixel und
der Definition der physikalischen Geräte-Pixel (Device Pixel Ratio)
Unten zwei Beispiele, die den Unterschied zwischen Angaben von effektiven und den physikalischen Pixeln aufzeigt:
iPhone 8
Bildschirm effektiv 375 × 667 px
Physikalische Auflösung 750 × 1334px
bei 326 ppi (Pixel per inch).
Device Pixel Ratio 2
iPad 2 (6th Gen) 2018
Bildschirm effektiv 768 × 1024 px
Physikalische Auflösung: 2048 × 1536 px
132 ppi (Pixel per inch)
Device Pixel Ratio 2
Die Gerätespezifikationen oben zeigen, dass die physikalische Grösse bei aktuellen Geräten in der Regel höher ist als die effektive Grösse des Bildschirms.
Bildschirme, die gegenüber der effektiven Bildschirmgrösse eine doppelte oder mehrfache Auflösungsrate aufweisen, werden als HD-Bildschirme oder bei Apple Retina-Bildschirme bezeichnet.
Technische Details Device Pixel Ratio
Der Begriff Device Pixel Ratio bezeichnet das Verhältnis zwischen der effektiven Bildschirmgrösse und physikalische Auflösung des Bildschirms. Darum haben die beiden oberen Beispiele eine Device Pixel Ratio von 2, d.h. die physikalische Auflösung doppelt so hoch wie die absolute Bildschirmgrösse.
Der Renderer des Browsers stellt entsprechend der Device Pixel Ratio die Pixel dar, d.h. er erzeugt durch Device Pixel Ratio 2 eine verdichtete Darstellung der Pixel dar, die Folge ist eine feinere und detaillierte Darstellung.
Beispiel unten:
Bei einem Gerät mit einer höheren physikalischen Auflösung können auf derselben Fläche mehr Pixel anzeigt werden.
Device Pixel Ratio 1: Auf einem Gerätepixel wir nur ein physikalisches Pixel dargestellt.
Device Pixel Ratio 2 und 3: Hier werden 2 bzw. 3 physikalische Pixel auf einem Gerätepixel dargestellt. Es entsteht eine höhere Pixeldichte.
Farbbildschirm LCD und OLED
Auch hier ist die Darstellungswiedergabe abhängig von der Device Pixel Ratio bzw. den technischen Spezifikationen des Geräts.
LCD: Pixel drei Teile: RGB (Device Pixel Ratio 1)
LCD Retina: Doppelte Auflösung in 1 Pixel (Device Pixel Ratio 2)
OLED Bildschirm: kleine LEDs erzeugen Wiedergabe
Unten das schematische Beispiel der Pixeldichte bei Farbbildschirmen.
Fazit
Die Darstellung der Bildqualität hängt stark von der Hardware bzw. von deren Pixeldichte ab. Darum lässt sich auch keine Aussage über die Grösse eines Pixels machen, da dies je nach Hersteller unterschiedlich ist.
Unten ein Ausschnitt der Liste «Screen Sizes», Quelle: http://screensiz.es
In der Praxis
Ein echter Qualitätsgewinn durch die höhere Pixeldichte der Displays ist vor allem bei der Darstellung von Vektorgrafiken wie z.B. SVG-Formate oder bei Schriften sichtbar. Die Konturen gewinnen deutlich an Schärfe.
Um bei Bildern den Qualitätsgewinn durch die höhere Pixeldichte der Displays nutzen zu können, sollten diese in doppelter oder sogar dreifacher Grösse der konventionellen Anzahl von 72 ppi für eine Bildschirm-Applikation zu Verfügung stehen.
Dabei ist aber zu berücksichtigen, dass eine Erhöhung von Pixeln bei Bildern auch eine längere Ladezeit bei Online-Applikationen verursacht. Deshalb ist sorgfältig abzuwägen ob eine Erhöhung von Pixeln zweckmässig ist.
Absolute Masseinheiten versus flexible Masseinheiten
Das Grundkonzept der flexiblen Masseinheiten hat zum Ziel, Inhalte auf allen Geräten, unabhängig von deren Grösse, darstellen zu können. Das bedeutet: Feste Masseinheiten wie Millimeter oder Zentimeter – wie in der Druckbranche üblich – sind für Bildschirm-Applikationen nicht geeignet.
Grundlage: Gesteuert werden Masseinheiten in der Regel über die CSS-Datei.
Absolute Angabe in Pixel
Unten ein Beispiel eines Elements in einer fixen Pixelgrösse von 400 × 400 px, das auf zwei verschiedenen Bildschirmen gezeigt wird (links Mobilgerät, rechts Desktop). Sichtbar ist, dass sich die Grösse des Elements nicht der Proportion des Bildschirms angepasst, d.h. die Proportionen von Bildschirmfläche und dem dargestellten Element ergeben ich zufällig durch die Bildschirmgrösse.
Um die Proportionen von Bildschirmflächen und Elementen steuern, bzw. gestalten zu können wurde das Konzept von flexiblen Masseinheiten realisiert. Damit kann mehr oder weniger gewährleiste werden, dass eine konsistente Gestaltung auf allen unterschiedlichen Bildschirmgrössen umgesetzt werden kann.
Relative Masseinheiten
Oft werden bei Bildschirmmedien Prozentwerte zur Definition der Breite von Elementen verwendet. Die absolute (effektive) Bildschirmbreite (= 100 Prozent) bildet die Bezugsgrösse für die Definition der Elemente. Das Beispiel unten zeigt das Prinzip: Die gesamte Bildschirmbreite (100%) gilt als Bezugsgrösse. Die beiden darin enthaltenen Elemente (1 uns 2) passen sich proportional, gemäss ihren prozentualen Breiten (30% und 70%) an.
Das Modell der Grössenangaben über Prozente lässt sich auf auch zur Definition von Schriftgrösse, Abstände, Ränder etc. anwenden.
REM und EM
REM = Root Element Modell; EM = Element Modell
Um das Konzept zu verstehen muss man wissen, dass eine HTML-Seite aus einem Gerüst ineinander verschachtelter Elemente zusammengesetzt ist. Die Elemente sind Container die durch Tags markiert werden. Beim EM und REM werden die Definitionen der Elemente über die Tag-Eigenschaften vererbt.
REM
Die oberste Hierarchie ist «Root» und ist auf der obersten Ebene des Dokuments als HTML-Tag definiert, das den gesamten Inhalt der Seite umschliesst. REM heisst Root Element Modell, das bedeutet dass sich die Masseinheit REM auf Schriftgrösse der obersten Ebene bezieht, z.B. html { font-size: 100%; } =100% bedeutet 16 Pixel. (Zur Info: 16 px ist die Defaulteinstellung der Schriftgrösse für alle Browser-Applikationen.)
Nun können weitere Grössen definiert werden z.B. #element_1 { font-size: 2 rem; } = 16px und #element_1 { font-size: 0.875 rem; } = 14 pt. Die Schriftgrösse, die über diesen Code gesteuert wird, bezieht sich über REM auf die Definition auf der obersten Ebene.
EM
Beim Element Modell werden die Eigenschaften des hierarchisch höheren Elements direkt auf das untergeordnete Element vererbt.
Im Beispiel unten werden beiden Modell vergleichbar aufgezeigt.
Zwar sind EM und REM Masseinheiten die sich auf Schriftgrössen beziehen, jedoch können damit auch sämtliche Abstände, Grössen und Positionierungen definiert werden, sodass sich damit ein sehr flexible Layout-System entwickeln lässt. Kombiniert mit Media Queries (Abfrage der Device-Grösse) lassen sich auch Weblayouts entwickeln, die sich den Zielgräten anpassen. (Zu Media Queries später mehr).
Viewport
Viewport bezeichnet den angezeigten Sichtbereich auf einem Gerät.
Übersetzt: Viewport = Sichtfenster, Sichtbereich.
Im Headerbereich eines HTML-Dokuments sorgt der Viewport-Tag dafür, dass die Elemente proportional verkleinert werden, sodass die Inhalte für den User auch auf sehr kleinen Mobilgeräten gut sicht- und lesbar bleiben.
<meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>
Der Teil «width = device-width» legt die Breite der Seite fest, die der Bildschirmbreite des Geräts folgt. (Die je nach Gerät unterschiedlich ist.)
Der Teil für die anfängliche Skalierung «initial-scale=1.0» legt die anfängliche Zoomstufe fest, wenn die Seite zum ersten Mal vom Browser geladen wird. Der Wert 1.0 bedeute, dass die Dimensionen nicht skaliert werden, sondern in der vorgesehen Grösse – durch die CSS-Datei bestimmt – dargestellt werden.
Unten ein Beispiel, wie eine Webseite mit und ohne Viewport-Tag dargestellt wird. Deutlich sichtbar wird ungenügende Lesbarkeit durch die starke Skalierung der Schrift.
Viewport kann auch als flexible Masseinheit verwendet werden, um die Dimensionen von Elementen zu definieren. Dabei wird die Breite und Höhe des Bildschirms zur Berechnung der Masse verwendet.
vh = viewport width
vw = viewport heigth
Zur Berechnung:
vh 100 = 100% Bildschirmhöhe
vw 100 = 100% Bildschirmbreite
An dieser stellen nicht besprochen werden weitere Möglichkeiten von flexiblen Masseinheiten wie z.B. die die «calc»-Funktion (calc steht für calculation = Berechnung)
Hier ein weiterführender Link: https://www.w3schools.com/cssref/func_calc.asp
Welches Modell zu Anwendung kommt – em oder rem, vh etc – ist jedem Entwickler selber überlassen, denn je nach Aufgabenstellung ist das eine oder andere Modell geeignet. Zentrale Bedeutung hat für Designer und Entwickler aber die Tatsache, dass mit flexiblen Masseinheiten dynamische und anpassungsfähige Bildschirmapplikationen realisierbar sind.
Allgemeine Links zum Thema
Weitere Links: http://www.intensivstation.ch/css3/em-rem