Hat kein Tag mit Breite oder anfänglicher Skalierung

Ohne ein Meta-Tag für den Darstellungsbereich rendern Mobilgeräte Seiten in typischen Desktop-Bildschirmbreiten und skalieren sie dann nach unten, was das Lesen erschwert.

Mit dem Meta-Tag für den Darstellungsbereich können Sie die Breite und Skalierung des Darstellungsbereichs so festlegen, dass er auf allen Geräten die richtige Größe hat.

So schlägt die Lighthouse-Prüfung des Viewport-Metatags fehl

Lighthouse kennzeichnet Seiten ohne Darstellungsbereich-Meta-Tag so:

Lighthouse-Prüfung zeigt, dass auf der Seite kein Viewport vorhanden ist

Eine Seite besteht die Prüfung nur, wenn alle folgenden Bedingungen erfüllt sind: - Das <head> des Dokuments enthält ein <meta name="viewport">-Tag. – Das Darstellungsbereich-Meta-Tag enthält ein content-Attribut. – Der Wert des Attributs content enthält den Text width=.

Viewport-Meta-Tag hinzufügen

Fügen Sie dem <head> Ihrer Seite ein Viewport-<meta>-Tag mit den entsprechenden Schlüssel/Wert-Paaren hinzu:

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

Die einzelnen Schlüssel/Wert-Paare haben folgende Funktion: - width=device-width legt die Breite des Viewports auf die Breite des Geräts fest. – initial-scale=1 legt die anfängliche Zoomstufe fest, wenn der Nutzer die Seite aufruft.

„initial-scale“ kleiner als 1

Wenn initial-scale auf einen Wert unter 1 festgelegt ist, kann dies dazu führen, dass Browser die Funktion „Doppeltippen zum Zoomen“ aktivieren, die normalerweise für Desktopwebsites verwendet wird, die nicht für Mobilgeräte optimiert sind. Dadurch wird bei allen Tippinteraktionen eine Verzögerung von 300 Millisekunden eingefügt, während der Browser darauf wartet, ob ein zweiter Doppeltipp erfolgt. Das Audit schlägt daher auch fehl, wenn „initial-scale“ auf einen Wert unter 1 gesetzt ist.

Ressourcen