Hat kein Tag mit Breite oder anfänglicher Skalierung

Ohne ein Meta-Tag für den Darstellungsbereich werden Seiten auf Mobilgeräten in der typischen Breite eines Computerbildschirms gerendert und dann verkleinert, was die Lesbarkeit erschwert.

Mit dem Meta-Tag „Darstellungsbereich“ können Sie die Breite und Skalierung des Darstellungsbereichs so steuern, dass er auf allen Geräten die richtige Größe hat.

Gründe für Fehler bei der Lighthouse-Prüfung des Viewport-Metatags

Lighthouse kennzeichnet Seiten ohne Darstellungsbereich-Meta-Tag:

Lighthouse-Analyse zeigt, dass auf der Seite kein Darstellungsbereich vorhanden ist

Eine Seite besteht die Prüfung nicht, es sei denn, alle folgenden Bedingungen sind erfüllt: – Der <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>-Element Ihrer Seite ein <meta>-Viewport-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 Bedeutung: - width=device-width legt die Breite des Darstellungsbereichs auf die Breite des Geräts fest. – initial-scale=1 legt die anfängliche Zoomstufe fest, wenn der Nutzer die Seite besucht.

Anfangsmaßstab kleiner als 1

Wenn der Wert für initial-scale unter 1 liegt, kann es sein, dass Browser die Funktion „Zum Zoomen doppeltippen“ aktivieren, die normalerweise für Desktop-Websites verwendet wird, die nicht für Mobilgeräte optimiert sind. Dadurch wird eine Verzögerung von 300 Millisekunden bei allen Tippaktionen hinzugefügt, während der Browser wartet, um zu prüfen, ob ein zweites „Doppeltippen“ erfolgt. Die Prüfung schlägt daher auch fehl, wenn „initial-scale“ auf weniger als 1 festgelegt ist.

Ressourcen