Het formaatwijzigingsgedrag van de URL-balk verandert in Chrome op Android vanaf versie 56. Dit is wat u moet weten:
Lengtes gedefinieerd in viewport-eenheden (dwz vh ) worden niet groter of kleiner als reactie op het tonen of verbergen van de URL-balk. In plaats daarvan worden vh eenheden aangepast aan de hoogte van de viewport, alsof de URL-balk altijd verborgen is. Dat wil zeggen dat vh eenheden worden gedimensioneerd op de "grootst mogelijke viewport". Dit betekent dat 100vh groter zal zijn dan de zichtbare hoogte wanneer de URL-balk wordt weergegeven.
Het Initial Containing Block (ICB) is het root-bevattende blok dat wordt gebruikt bij het dimensioneren van elementen ten opzichte van hun ouders. Geef het <html> -element bijvoorbeeld een width: 100%; height: 100% zorgt ervoor dat het dezelfde grootte heeft als de ICB. Met deze wijziging zal de grootte van de ICB niet worden aangepast wanneer de URL-balk verborgen is. In plaats daarvan blijft deze op dezelfde hoogte, alsof de URL-balk altijd zichtbaar is ("kleinst mogelijke viewport"). Dit betekent dat een element met de grootte van de ICB-hoogte de zichtbare hoogte niet volledig zal vullen terwijl de URL-balk verborgen is.
Er is één uitzondering op de bovenstaande wijzigingen en dat is voor elementen die position: fixed zijn. Hun gedrag blijft onveranderd. Dat wil zeggen, een position: fixed element waarvan het bevattende blok de ICB is, zal van grootte veranderen als reactie op het tonen of verbergen van de URL-balk. Als de hoogte bijvoorbeeld 100% is, zal deze altijd precies de zichtbare hoogte vullen, ongeacht of de URL-balk wel of niet wordt weergegeven. Op dezelfde manier wordt voor vh lengtes het formaat aangepast om overeen te komen met de zichtbare hoogte, waarbij rekening wordt gehouden met de positie van de URL-balk.
Er zijn een paar redenen voor deze verandering:
Bruikbare
vheenheden op mobiel. Voorheen betekende het gebruik vanvheenheden dat een pagina elke keer dat de gebruiker van scrollrichting veranderde, schokkend opnieuw werd weergegeven.Verbeterde gebruikerservaring. Als een pagina opnieuw wordt geplaatst terwijl de gebruiker aan het lezen is, kan de relatieve locatie in het document verloren gaan. Dit is frustrerend, maar brengt ook extra processorgebruik en batterijverbruik met zich mee om de pagina opnieuw te printen en opnieuw te schilderen.
Verbeterde interoperabiliteit met Safari op iOS. Het nieuwe model moet overeenkomen met hoe Safari zich gedraagt, waardoor het leven voor webontwikkelaars gemakkelijker wordt. De niet-intuïtieve keuze om
vheenheden de grootst mogelijke viewport te maken, maar de ICB de kleinst mogelijke, is om het gedrag van Safari te evenaren.
Voor scenario's op volledig scherm, waarbij de URL-balk is vergrendeld in een verborgen status, gebruikt de ICB de volledige schermhoogte. Dit komt overeen met de bovenstaande definities, aangezien 'kleinst mogelijke viewport' de volledige viewport zal zijn, aangezien de URL-balk niet wordt weergegeven tijdens het scrollen.
Demo
- Hier is een demonstratie . De vier balken aan de rechterkant van de pagina zijn allemaal mogelijke combinaties van
99%,99vh,position:fixedenposition:absoluteop een scrollbare pagina. Als u de URL-balk verbergt, ziet u welke invloed deze op elk heeft. Formaatwijzigingsgebeurtenissen worden onderaan de pagina afgedrukt.
Steun
- Chroom 56 op Android.