Wat is een mobiele viewport?
Een viewport is het venster waarin een webpagina wordt bekeken. Het configureren van de viewport betekent dat u aangeeft (in uw html code) hoe groot dat venster moet zijn. Een viewport wordt geconfigureerd door de viewport-metatag toe te voegen aan uw html pagina of te bewerken.
Viewports helpen gebruikers om web content correct te zien op schermen met verschillende formaten, zoals mobiele apparaten, tablets en desktopweergave van webpagina.
Hoe kan ik de viewport instellen?
De manier waarop we de viewport configureren, is de viewport-metatag. Dit is een klein stukje code dat we in het < head> < /head> van ons html-document plaatsen.
Google raadt 1 de volgende viewport-metatag aan voor een responsive website.
<meta name = viewport content = “width = device-width, initial-scale = 1”>
De bovenstaande metatag van de viewport geeft aan uw browser aan dat:
width = device-width
initiële schaal = 1
ofwel:
Breedte: maak de breedte van de pagina even breed als het scherm waarop deze wordt weergegeven.
Initiële schaal: als de pagina liggend wordt weergegeven (een telefoon die zijwaarts is gedraaid), maak de pagina dan zo breed mogelijk binnen dat scherm.
Hoe u uw viewport controleert
Gebruik onze mobiele Google Seo Check Tool om erachter te komen of uw pagina’s de viewport-tag correct (of helemaal niet) configureren.
Hieruit kunnen de volgende uitkomsten naar voren komen:
- Geen viewport
- uitgeschakeld viewport
In de bovenstaande afbeelding wordt geen viewport gedeclareerd. Op de desktop ziet de webpagina er normaal uit, maar op een mobiel apparaat met een kleiner scherm wordt de hele webpagina weergegeven door alles kleiner te maken, zodat het op het scherm past. Dit betekent dat wanneer een gebruiker naar deze pagina gaat, ze moeten inzoomen om de tekst groot genoeg te maken om te lezen.
- Geconfigureerde viewport
- correct ingesteld viewport
Wanneer we de viewport zo configureren dat deze dezelfde breedte heeft als het apparaat waarop het wordt weergegeven, zijn de tekst en afbeeldingen leesbaar zonder dat een gebruiker hoeft in te zoomen om alleen de pagina te lezen.
Toegankelijkheid
Gebruik geen “minimumschaal”, “maximumschaal” of “door gebruiker schaalbaar” in uw viewports. Als u dat doet, beperkt u het gebruik van uw pagina’s voor mensen die mogelijk niet goed zien.
