Hat kein Tag mit Breite oder anfänglicher Skalierung

Ohne ein Meta-Tag für den Darstellungsbereich rendern Mobilgeräte Seiten mit typischen Desktop-Bildschirmbreiten und verkleinern die Seiten dann, sodass sie schwer zu lesen sind.

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

So schlägt die Überprüfung des Lighthouse-Meta-Tags für den Darstellungsbereich fehl

Lighthouse kennzeichnet Seiten ohne Darstellungsbereich-Meta-Tag:

Bei der Lighthouse-Prüfung fehlt der Darstellungsbereich auf der Seite

Eine Seite besteht die Prüfung nicht, wenn alle diese 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 content-Attributs enthält den Text width=.

Meta-Tag für den Darstellungsbereich hinzufügen

Fügen Sie dem <head> Ihrer Seite ein <meta>-Tag für den Darstellungsbereich 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>
  …

Funktionsweise der einzelnen Schlüssel/Wert-Paare: – 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.

Anfängliche Skala von weniger als 1

Wenn initial-scale auf weniger als 1 festgelegt ist, kann dies dazu führen, dass Browser eine Funktion zum Zoomen durch Doppeltippen aktivieren. Diese Funktion wird normalerweise für Desktopwebsites verwendet, die nicht für Mobilgeräte optimiert sind. Dadurch werden Tippinteraktionen um 300 Millisekunden verzögert, während der Browser auf das zweite „Doppeltippen“ wartet. Die Prüfung schlägt daher auch fehl, wenn die anfängliche Skala auf weniger als 1 gesetzt ist.

Ressourcen