Hat kein Tag mit Breite oder anfänglicher Skalierung

Ohne das Meta-Tag für den Darstellungsbereich Mobilgeräte mit der typischen Desktop-Bildschirmbreite rendern und Seiten nach unten, wodurch sie schwer zu lesen sind.

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.

Fehler bei der Prüfung des Lighthouse-Darstellungsbereich-Meta-Tags

Lighthouse-Flags-Seiten ohne Darstellungsbereich-Meta-Tag:

Lighthouse-Prüfung zeigt, dass auf der Seite ein Darstellungsbereich fehlt

Eine Seite besteht die Prüfung nicht, es sei denn, alle dieser Bedingungen sind erfüllt: – <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>
  …

So funktionieren die einzelnen Schlüssel/Wert-Paare: Mit width=device-width wird die Breite des Darstellungsbereichs an die Breite des Geräts angepasst. – initial-scale=1 legt die anfängliche Zoomstufe fest, wenn der Nutzer die Seite besucht.

Anfängliche Skalierung unter 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 die anfängliche Skalierung auf weniger als 1 festgelegt ist.

Ressourcen