Responsief webdesign - The Viewport
Wat is The Viewport?
De viewport is het zichtbare gedeelte van een webpagina voor de gebruiker.
De viewport varieert met het apparaat en zal kleiner zijn op een mobiele telefoon dan op een computerscherm.
Vóór tablets en mobiele telefoons waren webpagina's alleen ontworpen voor computerschermen, en het was gebruikelijk dat webpagina's een statisch ontwerp en een vaste grootte hadden.
Toen we begonnen te surfen op het internet met tablets en mobiele telefoons, waren webpagina's met een vast formaat te groot om in de viewport te passen. Om dit op te lossen, hebben browsers op die apparaten de hele webpagina verkleind om op het scherm te passen.
Dit was niet perfect!! Maar een snelle oplossing.
Het kijkvenster instellen
HTML5 introduceerde een methode om webdesigners via de
<meta>tag controle te geven over de viewport.
U moet het volgende <meta>viewport-element in al uw webpagina's opnemen:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dit geeft de browser instructies over hoe de afmetingen en schaal van de pagina te bepalen.
Het width=device-widthonderdeel stelt de breedte van de pagina in om de schermbreedte van het apparaat te volgen (dit is afhankelijk van het apparaat).
Het initial-scale=1.0onderdeel stelt het initiële zoomniveau in wanneer de pagina voor het eerst door de browser wordt geladen.
Hier is een voorbeeld van een webpagina zonder de viewport-metatag en dezelfde webpagina met de viewport-metatag:
Tip: Als u deze pagina bekijkt met een telefoon of tablet, kunt u op de twee bovenstaande links klikken om het verschil te zien.
Grootte inhoud naar de viewport
Gebruikers zijn gewend om verticaal door websites te scrollen op zowel desktop als mobiele apparaten - maar niet horizontaal!
Dus als de gebruiker wordt gedwongen horizontaal te scrollen of uit te zoomen om de hele webpagina te zien, resulteert dit in een slechte gebruikerservaring.
Enkele aanvullende regels om te volgen:
1. Gebruik GEEN elementen met een grote vaste breedte . Als een afbeelding bijvoorbeeld breder wordt weergegeven dan de viewport, kan de viewport horizontaal scrollen. Vergeet niet om deze inhoud aan te passen aan de breedte van de viewport.
2. Laat de inhoud NIET afhankelijk zijn van een bepaalde kijkvensterbreedte om goed te worden weergegeven - Aangezien de schermafmetingen en -breedte in CSS-pixels sterk variëren tussen apparaten, mag inhoud niet afhankelijk zijn van een bepaalde kijkvensterbreedte om goed te worden weergegeven.
3. Gebruik CSS-mediaquery's om verschillende stijlen toe te passen voor kleine en grote schermen - Als u grote absolute CSS-breedten instelt voor pagina-elementen, wordt het element te breed voor de viewport op een kleiner apparaat. Overweeg in plaats daarvan relatieve breedtewaarden te gebruiken, zoals breedte: 100%. Wees ook voorzichtig met het gebruik van grote absolute positioneringswaarden. Het kan ertoe leiden dat het element op kleine apparaten buiten de viewport valt.