Wat het is
Telefoonschermen zijn fysiek smal, maar lange tijd werden de meeste websites gebouwd met een veel breder desktopscherm in gedachten. Om die oudere sites bruikbaar te houden, doen mobiele browsers standaard stilletjes alsof het scherm ongeveer 980 pixels breed is — ongeveer desktopformaat — en verkleinen ze vervolgens het geheel om het te laten passen. Daarom kan een niet-voorbereide pagina er piepklein en uitgezoomd uitzien op een telefoon, totdat iemand met de vingers inzoomt.
De viewport meta tag is één regel code, <meta name="viewport" content="width=device-width, initial-scale=1">, die dat oude standaardgedrag overschrijft en de browser vertelt: "schaal deze pagina eigenlijk naar de echte schermbreedte, op normale zoom". Dit is wat een responsive design (dat zich aanpast aan verschillende schermformaten) daadwerkelijk laat werken op een telefoon.
Waarom het belangrijk is
Zonder deze tag krijgt een pagina die zorgvuldig is ontworpen om zich te herschikken en aan te passen aan mobiele schermen daar nooit de kans toe — de telefoon rendert hem als een verkleinde desktoplayout, ongeacht hoe het onderliggende ontwerp daadwerkelijk gebouwd is. Dit is een puur technische, alles-of-niets instelling: óf de tag is aanwezig en correct, óf elke bezoeker op een telefoon ziet de verkeerde layout, hoe goed de rest van de site ook is ontworpen.
Omdat meer dan de helft van het webverkeer op de meeste sites van telefoons komt, kan deze ene ontbrekende regel invloed hebben op de meerderheid van de bezoekers, nog voordat ze zelfs maar beginnen te lezen.
Hoe je het oplost
- Bekijk de HTML-broncode van je pagina en controleer binnen de
<head>-sectie op een tag die begint met<meta name="viewport". - Ontbreekt deze, voeg dan
<meta name="viewport" content="width=device-width, initial-scale=1">rechtstreeks toe binnen de<head>-sectie. - Gebruik je een websitebouwer (Squarespace, Wix, Webflow, WordPress), dan wordt dit automatisch door het platform ingesteld — een ontbrekende tag wijst hier bijna altijd op een aangepaste code-embed die het overschrijft, dus controleer eventuele aangepaste
<head>-code die je hebt toegevoegd. - Voeg geen
maximum-scale=1ofuser-scalable=notoe aan dezelfde tag — die toevoegingen blokkeren het met de vingers inzoomen voor bezoekers, wat een apart toegankelijkheidsprobleem oplevert. - Laad de pagina daarna op een echte telefoon (of in de mobiele weergavemodus van je browser) om te bevestigen dat hij nu het scherm vult op een leesbaar formaat in plaats van uitgezoomd te lijken.