Das viewport-Meta-Tag
Fügen Sie das viewport-Meta-Tag hinzu und verstehen Sie, warum es für responsive Layouts auf Mobilgeräten erforderlich ist.
Das viewport-Meta-Tag ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum das Viewport-Meta-Tag?
Ohne das Viewport-Meta-Tag stellen mobile Browser die Seite mit einer Desktop-Breite (oft 980px) dar und verkleinern sie, damit sie hineinpasst. Dadurch wird der Text winzig und das Layout fehlerhaft. Das Meta-Tag weist den Browser an, die tatsächliche Breite des Geräts zu verwenden.
Das Tag
Fügen Sie dies in den <head> jeder Seite ein. Es ist erforderlich, damit jedes responsive Design korrekt funktioniert.
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width
width=device-width setzt die Breite des Viewports auf die Bildschirmbreite des Geräts in CSS-Pixeln. Auf einem iPhone 14 mit einer Breite von 390px ist der Viewport dadurch 390px breit und nicht 980px.
initial-scale=1.0
initial-scale=1.0 setzt den Zoomfaktor beim ersten Laden der Seite auf 1. Ohne diese Angabe wenden manche Browser möglicherweise weiterhin einen Zoomfaktor an. Zusammen mit device-width erhalten Sie dadurch ein echtes Verhältnis von 1:1 zwischen CSS-Pixeln und Geräte-Pixeln.
CSS-Pixel im Vergleich zu physischen Pixeln
Bildschirme mit hoher Pixeldichte (Retina) haben ein device pixel ratio (DPR) von mehr als 1. Ein 390px breites iPhone 14 verfügt über 1170 physische Pixel (DPR = 3). CSS-Pixel abstrahieren von physischen Pixeln — Ihr CSS funktioniert unabhängig vom DPR weiterhin mit CSS-Pixeln.
user-scalable=no nicht verwenden
Manche Entwickler fügen user-scalable=no hinzu, um das Zoomen per Pinch-Geste zu deaktivieren. Tun Sie das nicht. Dadurch wird verhindert, dass Benutzer mit Sehbeeinträchtigungen den Inhalt zum Lesen vergrößern, und das verstößt gegen das WCAG-Erfolgskriterium 1.4.4.
Viewport-Einheiten: vw und vh
1vw = 1 % der Viewport-Breite. 1vh = 1 % der Viewport-Höhe. 100vw und 100vh füllen den gesamten Viewport aus. Verwenden Sie sie für Hero-Bereiche und bildschirmfüllende Layouts.
.hero {
width: 100vw;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}dvh — Dynamische Viewport-Höhe
Auf Mobilgeräten umfasst 100vh auch die Browseroberfläche (Adressleiste), wodurch Inhalte abgeschnitten werden können. Das neuere 100dvh (dynamische Viewport-Höhe) berücksichtigt die sichtbare Browseroberfläche. Verwenden Sie es mit einem Fallback.
.full-screen {
min-height: 100vh; /* fallback */
min-height: 100dvh; /* modern browsers */
}Viewport in DevTools
Klicken Sie in den Chrome DevTools auf das Gerätesymbol, um den Gerätemodus zu aktivieren und genau zu sehen, wie Ihre Seite bei unterschiedlichen Viewport-Größen aussieht. Das Lineal zeigt CSS-Pixel an.
Varianten des content-Attributs
Sie können außerdem initial-scale, minimum-scale und maximum-scale festlegen. Verwenden Sie dafür sinnvolle Werte. Wenn Sie minimum-scale=1 ohne user-scalable=no setzen, ist Zoomen weiterhin möglich. Das ist der barrierefreie Ansatz.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">Viewport und Media Queries
Media Queries verwenden die Viewport-Breite (den Wert in CSS-Pixeln, nicht die physischen Pixel). Wenn Ihr Viewport 390px breit ist, trifft @media (max-width: 768px) zu. Das Viewport-Meta-Tag sorgt dafür, dass diese Breakpoints auf Mobilgeräten korrekt funktionieren.
Kurztest
Welchen Zweck hat width=device-width im Viewport-Meta-Tag?
Zusammenfassung: Das Viewport-Meta-Tag
Fügen Sie immer in den
ein. Deaktivieren Sie niemals die Möglichkeit zur Skalierung durch Benutzer. Verwenden Sie vw/vh für größenbezogene Angaben relativ zum Viewport. dvh behebt Probleme mit der Browseroberfläche auf Mobilgeräten. Dieses eine Tag ermöglicht, dass sämtliches responsives CSS auf Mobilgeräten funktioniert.Häufig gestellte Fragen
Ist die Lektion „Das viewport-Meta-Tag“ kostenlos?
Ja — der vollständige Text von „Das viewport-Meta-Tag“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Das viewport-Meta-Tag“?
Fügen Sie das viewport-Meta-Tag hinzu und verstehen Sie, warum es für responsive Layouts auf Mobilgeräten erforderlich ist. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Das viewport-Meta-Tag“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Das viewport-Meta-Tag
- Flexbox für Layouts
- CSS Grid für Layouts
- Media Queries und Mobile-First-Entwicklung