HTML Viewport: Alles wat je moet weten
De viewport wordt gebruikt om te bepalen hoe de website wordt weergegeven op verschillende formaten apparaten. Met de diversiteit aan schermgroottes en resoluties, van desktops en laptops tot tablets en smartphones, is het essentieel om te begrijpen hoe de viewport werkt om een optimale gebruikerservaring te garanderen.
Wat is de HTML Viewport?
De viewport is het gebied van het scherm van een apparaat waarop een webpagina wordt weergegeven. Op een desktop is dit het browservenster, terwijl het op mobiele apparaten het volledige scherm is. De viewport wordt ingesteld doormiddel van een <meta> tag in de <head>.
Basis syntaxis:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Hiermee wordt de standaard breedte en hoe de schaling werkt ingesteld.
Waarom is de viewport belangrijk?
Een van de belangrijkste redenen voor de viewport meta tag is om responsief webdesign mogelijk te maken. Responsief webdesign zorgt er voor dat de website zich aanpast aan de resoltie van het apparaat dat wordt gebruikt. Zonder de juiste viewport-instellingen kan een website er op een mobiel apparaat verstoord uitzien, met te kleine tekst of overlappende elementen.
Zoekmachines zoals Google nemen de mobiele bruikbaarheid van een website mee in hun rankingalgoritmen. Een website die ook goed werkt op een mobiel apparaat heeft een betere kans om hoger te scoren in zoekresultaten. De juiste viewport-instellingen dragen bij aan een positieve mobiele ervaring, wat dus ten goede komt aan je SEO.
Hoe werkt de viewport
De viewport meta tag kan verschillende eigenschappen hebben, elk met een specifieke functie.
width
De width eigenschap bepaalt de breedte van de viewport. Deze kan worden ingesteld op een pixel waarde, bijvoorbeeld 960px. Of op de breedte van het apparaat, device-width. Voor de beste gebruikerservaring wordt het aangeraden om het op de breedte van het apparaat te doen;
<meta name="viewport" content="width=device-width">
initial-scale
initial-scale wordt gebruikt om de zoomfactor in te stellen wanneer de pagina voor het eerst wordt geladen. Een waarde van 1.0 betekent dat de pagina op ware grootte wordt weergegeven. Welke wordt aanbevolen om te gebruiken.
<meta name="viewport" content="initial-scale=1.0">maximum-scale & minimum-scale
Mocht je willen instellen wat de maximale (maximum-scale) en minimale (minimum-scale) zoomfactor is kun je deze gebruiken.
Het wordt afgeraden om deze in te stellen. Dit voorkomt eventuele gebruikersverwarring.
user-scalable
Het is ook mogelijk om zoomen helemaal uit te schakelen. Dit kan doormiddel van de volgende;
<meta name="viewport" content="user-scalable=no">
Dit wordt echter afgeraden omdat de gebruiker dan helemaal niet meer kan zoomen wat niet goed is voor de gebruikerservaring.