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](https://developer.chrome.google.cn/static/docs/lighthouse/best-practices/viewport/image/lighthouse-audit-shows-pa-6f514cc3b4e29.png?authuser=6&hl=de)
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.