Mehr Viewport in Chrome: Neue Virtual-Viewport-Implementierung verbessert Darstellung
Kommentare

Responsive Designs, und damit der Viewport auf Devices mit unterschiedlichen Größen, spielen dank der zunehmenden Nutzung des Internets von mobilen Geräten aus eine immer wichtigere Rolle. Während es im Internet Explorer bereits einen aufgeteilten Virtual-Viewport gibt, kennt die bisherige Implementierung in Chrome nur einen Viewport, der allerdings bei der Darstellung von fixierten Elementen auf unterschiedlichen Displaygrößen für Probleme sorgt.

Nun soll auch in Chrome die Unterscheidung des Virtual Viewports in Layout-Viewport und visuellen Viewport den Umgang damit vereinfachen.

Virtual-Viewport: Layout und Sichtbarkeit

In Google Chrome wurde der Viewport bisher durch die Container für die Position der fixierten Elemente festgelegt, sodass der Viewport nicht anhand des Contents der Website skaliert wird. Bei Websites, deren Toolbar beispielsweise oben fixiert ist und die rechts und links Links beinhaltet, wird beim Zoomen und dem anschließenden Verschieben der Seite nach rechts oder links im Viewport nur das Logo, nicht aber die Links, angezeigt.

Um dieses Problem mit dem Viewport zu lösen, wollen die Chrome-Entwickler nun einen neuen Virtual-Viewport einführen, der zwischen Layout und Sichtbarkeit des Contents aufgeteilt wird. Ähnlich wie bereits beim Internet Explorer möglich, soll der Layout-Viewport die Container für positionsfixierte Elemente beinhalten und mit dem Content skaliert werden. Der visuelle Viewport ist das, was dann dem User angezeigt wird; er wird nicht mit der Seite skaliert und ist immer im Layout-Viewport enthalten.

In der aktuellen Beta-Version von Chrome wird bereits mit dem Virtual-Viewport gearbeitet; beim oben genannten Beispiel würden beim Zoomen und anschließenden Verschieben die rechts in der Toolbar enthaltenen Links angezeigt werden, weil der Visual-Viewport alle fixierten Elemente im Layout-Viewport miteinbezieht.

Das klingt nun alles reichlich kompliziert. Matt Gaunt veranschaulicht darum die Unterscheidung des Viewports mit Beispielen; zudem finden sich in seinem Blogpost zum Thema einige weiterführende Details zu der geplanten Implementierung des Virtual-Viewports in Chrome.

Aufmacherbild: magnifying glass on the green puzzle von Shutterstock / Urheberrecht: Laborant

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -