Das Verhalten der URL-Leiste ändert sich in Chrome unter Android ab Version 56. Das Wichtigste zu Super Stickern:
In Darstellungsbereichseinheiten definierte Längen (z.B. vh) werden nicht an die ein- oder ausgeblendete URL-Leiste angepasst. Stattdessen werden vh-Einheiten an die Höhe des Darstellungsbereichs angepasst, als wäre die URL-Leiste immer ausgeblendet. Das bedeutet, dass vh-Einheiten dem „größten Darstellungsbereich“ entsprechen. Das bedeutet, dass 100vh größer als die sichtbare Höhe ist, wenn die URL-Leiste angezeigt wird.
Der Initial Einschließen Block (ICB) ist der Stammblock, der verwendet wird, wenn die Größe von Elementen im Verhältnis zu ihren übergeordneten Elementen angepasst 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 wird die Höhe beibehalten, als ob die URL-Leiste immer angezeigt würde („kleinstmöglicher Darstellungsbereich“). Das bedeutet, dass ein Element, das 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 oben genannten Änderungen, und zwar für Elemente, die position: fixed sind. Ihr Verhalten bleibt unverändert. Das heißt, die Größe eines position:
fixed-Elements, dessen enthaltender Block der ICB ist, ändert die Größe als Reaktion darauf, ob die URL-Leiste ein- oder ausgeblendet wird. Wenn seine Höhe beispielsweise 100% beträgt, füllt er immer genau die sichtbare Höhe aus, unabhängig davon, ob die URL-Leiste angezeigt wird oder nicht. Ähnlich verhält es sich bei vh-Längen: Die Größe wird unter Berücksichtigung der Position der URL-Leiste an die sichtbare Höhe angepasst.
Für diese Änderung gibt es mehrere Gründe:
Nutzbare
vh-Einheiten auf Mobilgeräten. Bisher führte die Verwendung vonvh-Einheiten dazu, dass eine Seite jedes Mal, wenn der Nutzer die Scrollrichtung änderte, zu einem seltsamen Umbruch führte.Verbesserte Nutzererfahrung. Wenn eine Seite beim Lesen aktualisiert wird, verliert der Nutzer möglicherweise seine relative Position im Dokument. Das ist frustrierend, aber auch zusätzliche Prozessornutzung und eine schnelle Akkuentladung für das Umformatieren und das Aktualisieren der Seite mit sich bringen.
Die Interoperabilität mit Safari unter iOS wurde verbessert. Das neue Modell sollte dem Verhalten von Safari entsprechen und Webentwicklern die Arbeit erleichtern. Es ist nicht intuitiv,
vh-Einheiten zum größtmöglichen Darstellungsbereich, aber die ICB-Einheit so klein wie möglich zu machen, indem das Verhalten von Safari angepasst wird.
In Vollbildszenarien, in denen die URL-Leiste ausgeblendet ist, verwendet das ICC die Vollbildhöhe. Dies entspricht den obigen Definitionen, da „kleinstmöglicher Darstellungsbereich“ den gesamten Darstellungsbereich ausfüllt, da die URL-Leiste beim Scrollen nicht angezeigt wird.
Demo
- Hier finden Sie eine Demonstration.
Die vier Balken auf der rechten Seite sind alle möglichen Kombinationen von
99%,99vh,position:fixedundposition:absolute, die auf einer scrollbaren Seite bereitgestellt werden. Wenn Sie die URL-Leiste ausblenden, sehen Sie die jeweiligen Auswirkungen. Ereignisse zur Größenänderung werden auf der Seite angezeigt.
Support
- Chrome 56 für Android.