Zonder viewport-metatag geven mobiele apparaten pagina's weer met de typische breedte van een desktopscherm en schalen de pagina's vervolgens kleiner, waardoor ze moeilijk leesbaar worden.
Door de viewport-metatag in te stellen, kunt u de breedte en schaal van de viewport bepalen, zodat deze op alle apparaten de juiste grootte heeft.
Hoe de Lighthouse viewport-metatag-audit mislukt
Pagina's met vuurtorenvlaggen zonder viewport-metatag:
Een pagina slaagt niet voor de controle, tenzij aan alle volgende voorwaarden is voldaan: - De <head> van het document bevat een <meta name="viewport"> tag. - De viewport-metatag bevat een content attribuut. - De waarde van het content attribuut bevat de tekst width= .
Hoe voeg ik een viewport-metatag toe?
Voeg een viewport <meta> -tag met de juiste sleutel-waardeparen toe aan de <head> van uw pagina:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Dit is wat elk sleutel-waardepaar doet: - width=device-width stelt de breedte van het venster in op de breedte van het apparaat. - initial-scale=1 stelt het initiële zoomniveau in wanneer de gebruiker de pagina bezoekt.
Initiële schaal van minder dan 1
Als de initial-scale kleiner is dan 1, kan dit ertoe leiden dat browsers de functie 'dubbeltikken om te zoomen' inschakelen, die doorgaans wordt gebruikt voor desktopsites die niet geoptimaliseerd zijn voor mobiel. Dit voegt een vertraging van 300 milliseconden toe aan elke tikinteractie terwijl de browser wacht om te controleren of er een tweede 'dubbele' tik plaatsvindt. De audit mislukt daarom ook wanneer de initiële schaal kleiner is dan 1.