In Chrome M40 is er een wijziging in de viewport die behoorlijk subtiel is, maar voor gebruikers een groot verschil zou moeten maken.
Toen mobiele browsers begonnen, zorgde het ontbreken van een viewport-metatag ervoor dat de webpagina dacht dat deze ongeveer 980px aan schermruimte had en op deze grootte werd weergegeven. Met een viewport-metatag konden ontwikkelaars de breedte definiëren, waarvan de meest voorkomende 'device-width' is, waarmee de schermgrootte wordt ingesteld op die van het apparaat. U kunt meer leren over Web Fundamentals .
De manier waarop Rick Byers de virtuele viewport beschrijft is als volgt: het idee van de virtuele viewport is om het begrip "de viewport" in tweeën te splitsen, "de lay-outviewport" (waar items met een vaste positie aan zijn bevestigd) en "de visuele viewport". (Wat de gebruikers daadwerkelijk zien).
Supereenvoudig voorbeeld
De website videojs.com is een goed voorbeeld omdat de appbalk bovenaan vastzit en links zowel aan de linker- als aan de rechterkant van de appbalk staat.
De onderstaande afbeelding laat zien wat u zou zien als u inzoomde op een site en probeerde naar links en rechts te pannen.
De bovenste apparaten zijn Chrome M39, die geen virtuele viewport heeft, en de onderste drie zijn van Chrome M40, die een virtuele viewport heeft.
In Chrome M39 zie je de appbalk nadat je hebt ingezoomd, maar als je naar rechts scrolt, kun je de links aan de rechterkant van de balk niet zien, je ziet altijd alleen het logo.
Vergelijk dit met Chrome M40 (die een "virtuele viewport" heeft) en je zult zien dat de "visuele viewport" alles binnen de "layout viewport" scrolt, waardoor je de links aan de rechterkant kunt bekijken.
Internet Explorer vertoont dit gedrag al en deze veranderingen brengen ons er dichter bij.
html
De enige grote ontwikkelaar die hiermee te maken krijgt, is dat je in M39 overflow zou kunnen toepassen: verborgen voor het html-element en je pagina zou nog steeds scrollen, in M40 wordt dit niet langer ondersteund, de pagina zal gewoon niet scrollen.
Meer solide informatie
Je wilt meer leren hè?
Welnu, je kunt het slidedeck hieronder bekijken.