Das Größenänderungsverhalten der URL-Leiste ändert sich in Chrome unter Android ab Version 56. Das Wichtigste zu Super Stickern:
Bei Längen, die in Darstellungsbereichen (z.B. vh) definiert sind, ändert sich die Größe nicht als Reaktion auf das Ein- oder Ausblenden der URL-Leiste. Stattdessen werden vh-Einheiten an die Höhe des Darstellungsbereichs angepasst, als wäre die URL-Leiste immer ausgeblendet. Das heißt, vh-Einheiten werden an den „größten Darstellungsbereich“ angepasst. Das bedeutet, dass 100vh größer als die sichtbare Höhe ist, wenn die URL-Leiste angezeigt wird.
Der ursprüngliche enthaltende Block (Anfänglicher enthaltender Block) ist der Block mit der Wurzel, der beim Festlegen der Größe von Elementen im Verhältnis zu ihren übergeordneten Elementen verwendet wird. Wenn Sie dem <html>-Element beispielsweise den Stil width: 100%; height: 100% zuweisen, hat es die gleiche Größe wie der ICB. Durch diese Änderung ändert sich die Größe des ICB nicht, wenn die URL-Leiste ausgeblendet ist.
Stattdessen bleibt sie dieselbe Höhe, als wäre die URL-Leiste immer zu sehen ("kleinstmöglicher Darstellungsbereich"). Das bedeutet, dass ein Element, dessen Größe an die ICB-Höhe angepasst ist, die sichtbare Höhe nicht vollständig ausfüllt, während die URL-Leiste ausgeblendet ist.
Es gibt eine Ausnahme zu den obigen Änderungen, und zwar für Elemente mit dem Status position: fixed. Ihr Verhalten bleibt unverändert. Das heißt, die Größe eines position:
fixed-Elements, dessen Block der ICB ist, ändert sich in Reaktion auf das Ein- oder Ausblenden der URL-Leiste. Wenn die Höhe beispielsweise 100% beträgt, füllt sie immer genau die sichtbare Höhe aus, unabhängig davon, ob die URL-Leiste angezeigt wird oder nicht. Auf ähnliche Weise wird die Größe von vh-Längen an die sichtbare Höhe angepasst, wobei die Position der URL-Leiste berücksichtigt wird.
Für diese Änderung gibt es mehrere Gründe:
Auf Mobilgeräten nutzbare
vh-Einheiten Bisher bedeutete die Verwendung vonvh-Einheiten, dass eine Seite jedes Mal neu angeordnet wurde, wenn der Nutzer die Scrollrichtung änderte.Verbesserte Nutzererfahrung Wenn eine Seite neu angeordnet wird, während der Nutzer liest, verliert er möglicherweise die relative Position im Dokument. Das ist frustrierend, führt aber auch zu einer zusätzlichen Prozessornutzung und einer starken Akkuentladung, um das Layout und die Darstellung der Seite neu zu gestalten.
Verbesserte Interoperabilität mit Safari unter iOS. Das neue Modell sollte dem Verhalten von Safari entsprechen und so Webentwicklern das Leben erleichtern. Die nicht intuitive Wahl,
vh-Einheiten als den größtmöglichen Darstellungsbereich und den kleinsten Darstellungsbereich festzulegen, entspricht dem Verhalten von Safari.
In Vollbildszenarien, in denen die URL-Leiste auf einen ausgeblendeten Zustand gesperrt ist, verwendet das IBP die Vollbildhöhe. Das entspricht den obigen Definitionen, da „kleinstmöglicher Darstellungsbereich“ dem gesamten Darstellungsbereich entspricht, da die URL-Leiste beim Scrollen nicht zu sehen ist.
Demo
- Hier finden Sie eine Demo.
Die vier Balken rechts auf der Seite stellen alle möglichen Kombinationen von
99%,99vh,position:fixedundposition:absolutedar, die auf einer scrollbaren Seite bereitgestellt werden. Wenn Sie die URL-Leiste ausblenden, sehen Sie, welche Auswirkungen sie jeweils haben. Ereignisse zur Größenanpassung werden auf der Seite nach unten gedruckt.
Support
- Chrome 56 für Android