Zonder een viewport-metatag geven mobiele apparaten pagina's weer op de gebruikelijke breedte van het desktopscherm en schalen ze de pagina's vervolgens naar beneden, 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
Lighthouse markeert pagina's zonder viewport-metatag:
Een pagina slaagt niet voor de audit, tenzij aan al deze voorwaarden wordt voldaan: - De <head> van het document bevat een tag <meta name="viewport"> . - De viewport-metatag bevat een content . - De waarde van het content omvat de tekst width= .
Hoe u een viewport-metatag toevoegt
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 de viewport 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 is ingesteld op minder dan 1, kan dit ertoe leiden dat browsers een functie voor dubbeltikken om te zoomen inschakelen, die doorgaans wordt gebruikt voor desktopsites die niet voor mobiel zijn geoptimaliseerd. 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 dus ook als de initiële schaal kleiner is dan 1.