Viewport-Meta-Tag

Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 62 von 76.

In HTML ist das Viewport-Meta-Tag ein spezielles Tag, das verwendet wird, um das Layout und die Skalierung einer Webseite auf verschiedenen Geräten, insbesondere auf mobilen Geräten, zu steuern. Es wird im Abschnitt <head> eines HTML-Dokuments platziert und gibt dem Browser Anweisungen, wie die Seite dargestellt werden soll. Das Viewport-Meta-Tag ist unerlässlich für die Erstellung responsiver Webdesigns, die sich an verschiedene Bildschirmgrößen und Auflösungen anpassen.

Hier ist die grundlegende Syntax für die Verwendung des Viewport-Meta-Tags:

<meta name="viewport" content="name=value, name=value">

<meta>: Das HTML-Tag, das zum Definieren von Metadaten über das HTML-Dokument verwendet wird.
name="viewport": Gibt an, dass dieses Meta-Tag zur Steuerung der Viewport-Einstellungen verwendet wird.
content: Ein Attribut, das die Viewport-Einstellungen als durch Kommas getrennte Liste von name=value-Paaren bereitstellt.

Häufige name=value-Paare, die im content-Attribut verwendet werden, sind:

width=device-width: Setzt die Breite des Viewports auf die Breite des Gerätebildschirms.

initial-scale=1.0: Legt die anfängliche Zoomstufe fest, wenn die Seite zum ersten Mal geladen wird. Ein Wert von 1.0 bedeutet kein Zoom.

maximum-scale=1.0: Legt die maximal zulässige Zoomstufe fest.
minimum-scale=1.0: Legt die minimal zulässige Zoomstufe fest.

Hier ist ein Beispiel dafür, wie das Viewport-Meta-Tag in einem HTML-Dokument verwendet wird:

<!DOCTYPE html>
<html>
<head>
    <title>Viewport Meta Tag</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Responsive Web Page</h1>
    <p>This page uses the viewport meta tag to adapt to different screen sizes.</p>
</body>
</html>

In diesem Beispiel ist das Viewport-Meta-Tag auf width=device-width, initial-scale=1.0 gesetzt. Dadurch wird der Browser angewiesen, die Breite des Viewports auf die Gerätebreite festzulegen und eine anfängliche Zoomstufe von 1.0 (keine Vergrößerung) zu verwenden.

Aufgabe

Einfach

Du erhältst ein HTML-Dokument mit einer Überschrift (<h1>) und einem Absatz (<p>). Deine Aufgabe besteht darin, dem Dokument ein Viewport-Meta-Tag hinzuzufügen, damit es responsiv ist. Befolge die folgenden Schritte:

Füge dem Abschnitt <meta> des HTML-Dokuments ein <head>-Tag hinzu.
Setze das Attribut name des <meta>-Tags auf viewport.
Setze das Attribut content des <meta>-Tags auf width=device-width, initial-scale=1.0.

Probier es selbst

<html>
<head>
    <title>Viewport Meta Tag</title>
    <!--Schreibe deinen Code hier-->
</head>
<body>
    <h1>Responsive Web Page</h1>
    <p>This page uses the viewport meta tag to adapt to different screen sizes.</p>
</body>
</html>