Ab Chrome-Version 56 ändert sich das Verhalten beim Ändern der Größe der URL-Leiste in Chrome auf Android-Geräten. Das Wichtigste zu Super Stickern:
Längen, die in Ansichtseinheiten (z.B. vh) definiert sind, werden nicht geändert, wenn die URL-Leiste angezeigt oder ausgeblendet wird. Stattdessen werden vh-Einheiten auf die Höhe des Darstellungsbereichs skaliert, als wäre die URL-Leiste immer ausgeblendet. Das bedeutet, dass vh-Anzeigenblöcke auf die „größte mögliche Ansicht“ zugeschnitten werden. Das bedeutet, dass 100vh größer ist als die sichtbare Höhe, wenn die URL-Leiste angezeigt wird.
Der initiale enthaltende Block (Initial Containing Block, ICB) ist der übergeordnete Block, der verwendet wird, um Elemente relativ zu ihren übergeordneten Elementen zu dimensionieren. Wenn Sie dem Element <html> beispielsweise den Stil width: 100%; height: 100% zuweisen, hat es dieselbe Größe wie der ICB. Durch diese Änderung ändert sich die Größe des Info-Centers nicht, wenn die URL-Leiste ausgeblendet ist.
Stattdessen bleibt die Höhe gleich, als wäre die URL-Leiste immer sichtbar („kleinstmöglicher Darstellungsbereich“). Das bedeutet, dass ein Element, das auf die Höhe der ICB-Leiste zugeschnitten ist, die sichtbare Höhe nicht vollständig ausfüllt, während die URL-Leiste ausgeblendet ist.
Eine Ausnahme von den oben genannten Änderungen gilt für Elemente vom Typ position: fixed. Ihr Verhalten bleibt unverändert. Das heißt, die Größe eines position:
fixed-Elements, dessen enthaltender Block der ICB ist, wird entsprechend der Anzeige oder Ausblendung der URL-Leiste angepasst. Wenn die Höhe beispielsweise 100% beträgt, nimmt sie immer genau die sichtbare Höhe ein, unabhängig davon, ob die URL-Leiste angezeigt wird oder nicht. Die Länge von vh wird ebenfalls an die sichtbare Höhe angepasst, wobei die Position der URL-Leiste berücksichtigt wird.
Dafür gibt es mehrere Gründe:
vhEinheiten auf Mobilgeräten nutzbar. Zuvor wurde bei der Verwendung vonvh-Einheiten die Seite jedes Mal ruckartig neu formatiert, wenn der Nutzer die Scrollrichtung änderte.Verbesserte Nutzerfreundlichkeit. Wenn eine Seite während des Lesens neu formatiert wird, kann der Nutzer seinen relativen Standort im Dokument verlieren. Das ist frustrierend, führt aber auch zu einer zusätzlichen Prozessornutzung und einem höheren Akkuverbrauch, da die Seite neu layoutet und neu gerendert werden muss.
Verbesserte Interoperabilität mit Safari auf iOS. Das neue Modell sollte dem Verhalten von Safari entsprechen, was die Arbeit für Webentwickler erleichtert. Die nicht intuitive Entscheidung,
vh-Einheiten den größten möglichen Darstellungsbereich und den ICB den kleinstmöglichen zuzuweisen, soll dem Verhalten von Safari entsprechen.
Bei Vollbildszenarien, in denen die URL-Leiste ausgeblendet ist, nimmt die ICB die volle Bildschirmhöhe ein. Das entspricht den oben genannten Definitionen, da der kleinstmögliche Darstellungsbereich der vollständige Darstellungsbereich ist, da die URL-Leiste beim Scrollen nicht angezeigt wird.
Demo
- Hier ist eine Demo.
Die vier Balken rechts auf der Seite sind alle möglichen Kombinationen von
99%,99vh,position:fixedundposition:absoluteauf einer scrollbaren Seite. Wenn Sie die URL-Leiste ausblenden, sehen Sie, wie sich das auf die einzelnen Elemente auswirkt. Ereignisse vom Typ „Größe ändern“ werden unten auf der Seite gedruckt.
Support
- Chrome 56 für Android