TIL: dvh

Dynamische Höhen bei Smartphones

100 % Breite sind 100 % Breite, auch am Smartphone. Zumindest 100 % vom umgebenden Element …

Bei der Höhe stimmt das nicht so einfach: 100 % vom BODY sind nicht unbedingt 100 % der Bildschirmhöhe.

exemplarisch ist hier der Bildschirm in hellgelb dargestellt, der verwendete BODY-Teil in dunkelrot

In der Anfangszeit versuchte man volle Bildschirmhöhe (Viewhöhe) zu erzwingen, indem man in der CSS-Datei HTML eine Höhe von 100 % zuschrieb.

Dann wurde als Maßeinheit vh eingeführt: 1 % der Höhe des umgebenden Blocks …

Weil aber Handys so kleine Bildschirme haben (trotz Remina-Display), haben deren Hersteller Tricks entwickelt, wie man die verfügbare Höhe der Bildschirme beim Surfen im Web „vergrößern“ kann.

So werden z. B. die Adresszeile des Browsers beim Scrollen ausgeblendet – was eine Änderung der View-Höhe bewirkt und somit den Vorteil von vh ad absurdum führt.

Lösung: neue Viewport-Einheiten

neue Viewport-Höhen-Einheiten: s - small, l - long, d - dynamic
Abb. entlehnt bei mediaevent.de

Achtung: die Verwendung von dvh (bzw. dvw) kann eine Größenänderung des Inhalts bewirken während der User scrollt … [kann störend wirken !]