Viewport tag
Ook wel meta viewport
Wat is een viewport tag?
Een viewport tag is een regel code in de kop van je webpagina die de browser vertelt hoe breed je pagina op een scherm moet worden getoond. Zonder deze tag laat een telefoon je site vaak piepklein zien, alsof het een computerscherm is.
Veelgestelde vragen over viewport tag
Hoe controleer ik of mijn website een viewport tag heeft?
Dat controleer je het snelst via de broncode van je pagina:
- Open je website in Chrome of Edge.
- Druk op Ctrl+U (op een Mac Cmd+Option+U) om de broncode te zien.
- Zoek met Ctrl+F op het woord viewport.
Vind je een regel met name="viewport", dan is de tag aanwezig. Wil je ook weten of hij goed is ingesteld? Draai dan een test in PageSpeed Insights van Google. In het rapport zie je een melding als de tag ontbreekt of als hij inzoomen blokkeert.
Hoe voeg ik een viewport tag toe in WordPress?
Meestal hoef je niets te doen, want vrijwel alle moderne WordPress-thema's plaatsen de viewport tag zelf. Controleer dat eerst. Ontbreekt hij, dan voeg je hem zo toe:
- Installeer de gratis plugin WPCode.
- Ga naar Code Snippets en kies Header & Footer.
- Plak de viewport-regel in het vak Header.
- Sla op en controleer de broncode.
Pas het bestand header.php van je thema liever niet direct aan, want bij een thema-update ben je die wijziging kwijt. Ontbreekt de tag in je thema, dan is dat vaak een teken dat het thema verouderd is.
Welke code gebruik ik precies voor de viewport tag?
De standaardregel die bijna elke website gebruikt, is:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width zegt dat de pagina even breed moet zijn als het scherm van het apparaat. Met initial-scale=1 wordt de pagina bij het openen niet in- of uitgezoomd. Meer heb je meestal niet nodig. Zet de regel in de head van je pagina en zorg dat hij er maar één keer staat. Twee viewport tags met verschillende waarden kunnen ervoor zorgen dat browsers je pagina anders tonen dan je verwacht.
Mag ik inzoomen blokkeren met de viewport tag?
Technisch kan dat met user-scalable=no of maximum-scale=1, maar het is een veelgemaakte fout. Bezoekers die slechter zien, kunnen dan niet meer inzoomen op tekst of afbeeldingen. Daardoor wordt je site minder toegankelijk en geeft PageSpeed Insights er een waarschuwing voor. Sommige browsers, zoals Safari op de iPhone, negeren de instelling zelfs. Vaak wordt inzoomen geblokkeerd om te voorkomen dat een telefoon automatisch inzoomt op een invulveld. Dat los je beter op door de tekst in je formuliervelden minimaal 16 pixels groot te maken.
Is mijn site met een viewport tag meteen mobielvriendelijk?
Nee. De tag vertelt de browser alleen hoe breed de pagina moet zijn. Daarnaast moet je site responsive zijn: de opmaak past zich dan aan de schermgrootte aan. Zonder responsive opmaak geeft een viewport tag soms juist een slechter resultaat, zoals blokken die buiten het scherm vallen en een horizontale scrollbalk. Let daarom ook op leesbare lettergroottes, knoppen die groot genoeg zijn om met je vinger aan te tikken en afbeeldingen die meeschalen. Dat telt mee voor SEO, omdat Google vooral naar de mobiele versie van je site kijkt.
