Wat is de viewport meta tag?
De viewport meta tag is één regel in je pagina die een telefoon vertelt dat je site op schermbreedte getoond mag worden. Zonder die regel doet hij alsof hij een bureaublad is en zoomt hij uit.
Het is de meest onmisbare regel van elke responsieve site.
En elk fatsoenlijk thema plaatst hem automatisch.
Wat hij doet
Hij zet de breedte van de viewport gelijk aan de breedte van het apparaat en de beginzoom op honderd procent.
Meer daarover lees je bij responsive design.
Wat er zonder gebeurt
Je telefoon doet alsof het scherm bijna duizend pixels breed is en verkleint alles. Je tekst wordt onleesbaar.
Meer daarover lees je bij waarom je site uitgezoomd is op mobiel.
Waar hij staat
In het hoofdgedeelte van je pagina, bij je andere metatags. Je ziet hem in je broncode bovenaan.
Meer daarover lees je bij css.
Mijn vuistregels
- Altijd aanwezig.
- Nooit inzoomen blokkeren.
- Nooit een vaste breedte instellen.
- Controleer hem in je broncode.
Die tweede is een toegankelijkheidsregel: mensen moeten kunnen inzoomen.
De instelling die je niet gebruikt
Een waarde die inzoomen verbiedt. Dat kom je nog tegen in oudere thema’s en het is een echte belemmering.
Meer daarover lees je bij accessibility.
Hoe je hem controleert
Bekijk je broncode en zoek op het woord viewport. Staat hij er, dan zit het goed.
Meer daarover lees je bij mobile first.