Hoe werkt de viewport op een telefoon?
Veel mobiele browsers bouwen een pagina zonder instructie op in een virtueel venster dat breder is dan het scherm. MDN geeft een voorbeeld: een scherm van 640 pixels breed toont een pagina die op 980 pixels is opgebouwd en daarna verkleind. Voor oude desktopsites is dat handig. Voor een site met responsive design werkt het slecht: media queries voor 640 pixels of smaller slaan dan nooit aan.
Er bestaan eigenlijk twee viewports. De layout-viewport is de breedte waarop de browser de pagina opbouwt. De visuele viewport is het stuk dat je echt ziet. Zoom je met twee vingers in, dan wordt de visuele viewport kleiner, terwijl de layout-viewport gelijk blijft.
Hoe stel je de viewport-metatag in?
Je zet de tag in de head van elke pagina. MDN raadt deze instelling aan, zodat de viewport even breed is als het apparaat:
<meta name="viewport" content="width=device-width">Vaak zie je er initial-scale=1 bij staan. Dat zet de zoom bij het openen op 100 procent. Volgens MDN is het meestal niet nodig, tenzij inhoud die te breed is de pagina ongewenst verkleint.
Zet inzoomen niet uit met user-scalable=no. Mensen die slecht zien, kunnen je tekst dan niet meer lezen. WCAG vraagt dat je minstens tot 200 procent kunt vergroten. Bovendien kan een browser de instelling negeren. Op een iPhone gebeurt dat standaard.
Lighthouse controleert of de tag de pagina geschikt maakt voor mobiel. Zonder tag toont een telefoon een verkleinde desktopversie. Staat initial-scale lager dan 1, dan kan de browser bij elke tik 300 milliseconden wachten op een mogelijke dubbele tik.
Voorbeeld: een oude site op een nieuwe telefoon
Een sportschool uit Tilburg heeft een site van jaren geleden. Het ontwerpbureau voegde later media queries toe voor smalle schermen, maar vergat de viewport-metatag. Op een telefoon zien bezoekers daardoor een piepkleine desktopversie. Ze moeten inzoomen om het rooster te lezen.
De sportschool voegt de viewport-metatag met width=device-width toe aan de head van de sjablonen. Nu bouwt de telefoon de pagina op schermbreedte op. De media queries slaan aan en het rooster staat in één kolom onder elkaar.
Verwar de viewport niet met
- Schermresolutie: het aantal fysieke pixels van het scherm. De breedte van de viewport meet je in CSS-pixels. Op een scherm met een hoge pixeldichtheid vormen meerdere fysieke pixels samen één CSS-pixel.
- Above the fold: het deel van de pagina dat je ziet zonder te scrollen. Dat is de viewport op het moment dat de pagina opent. Daarna schuift de viewport mee terwijl je scrolt.
Veelgestelde vragen over Viewport
Wat betekent viewport?
De viewport is het stuk van een webpagina dat je op dit moment ziet in je browser. Wat erbuiten valt, komt pas in beeld als je scrolt.
Welke viewport-metatag moet ik gebruiken?
Gebruik width=device-width in de content van de tag. Dan bouwt een telefoon de pagina op de breedte van het scherm op. Zet initial-scale=1 erbij als te brede inhoud je pagina ongewenst verkleint.
Mag je inzoomen uitzetten in de viewport-metatag?
Dat kan, maar doe het niet. Mensen die slecht zien, moeten kunnen inzoomen om je tekst te lezen. Op een iPhone werkt de instelling bovendien standaard niet.