Was ist der virtuelle Darstellungsbereich?

Matt Gaunt

In Chrome M40 gibt es eine subtile Änderung am Darstellungsbereich, die für Nutzer aber einen großen Unterschied machen sollte.

Zu Beginn der mobilen Browser ließ sich aufgrund des fehlenden Meta-Tags für den Darstellungsbereich der Webseite vermitteln, dass sie eine Fläche von etwa 980 Pixeln auf dem Bildschirm hätte und in dieser Größe gerendert werden konnte. Mit einem Darstellungsbereich-Meta-Tag können Entwickler die Breite definieren. Die gängigste ist „device-width“, die die Bildschirmgröße auf die des Geräts festlegt. Weitere Informationen zu Web Fundamentals

Rick Byers beschreibt den virtuellen Darstellungsbereich folgendermaßen: Die Idee des virtuellen Darstellungsbereichs besteht darin, die Idee des "Darstellungsbereichs" in zwei Teile zu unterteilen: den "Layout-Darstellungsbereich" (mit festen Positionselementen verbunden) und "den visuellen Darstellungsbereich" (was die Nutzer tatsächlich sehen).

Super einfaches Beispiel

Die Website videojs.com ist ein gutes Beispiel, da die App-Leiste oben fixiert ist und sich sowohl links als auch rechts von der App-Leiste Links befindet.

Die folgende Abbildung zeigt, was Sie sehen würden, wenn Sie eine Website heranzoomen und nach links und rechts schwenken würden.

Die oberen Geräte sind Chrome M39, die keinen virtuellen Darstellungsbereich haben, und die unteren 3 Geräte aus Chrome M40, die einen virtuellen Darstellungsbereich hat.

Verpixeltes Rendering
Verpixeltes Rendering

In Chrome M39 wird die App-Leiste nach dem Heranzoomen angezeigt. Wenn Sie jedoch nach rechts scrollen, können Sie die Links auf der rechten Seite der Leiste nicht sehen, sondern nur das Logo.

Im Vergleich zu Chrome M40 (mit einem „virtuellen Darstellungsbereich“) wird im „visuellen Darstellungsbereich“ alles innerhalb des Darstellungsbereichs des Layouts gescrollt, sodass Sie die Links auf der rechten Seite sehen können.

Internet Explorer hat dieses Verhalten bereits, und diese Änderungen bringen uns enger mit ihnen in Einklang.

html

Die einzige große Änderung, die sich für Entwickler ergibt, besteht darin, dass Sie in M39 „overflow: hidden“ auf das HTML-Element anwenden könnten und Ihre Seite trotzdem gescrollt wird. In M40 wird dies nicht mehr unterstützt und die Seite lässt sich einfach nicht scrollen.

Solidere Informationen

Du möchtest mehr erfahren, oder?

Dann können Sie sich die Präsentation unten ansehen.