Die Zeile <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ist ein HTML-Head-Meta-Tag, das sicherstellt, dass Ihre Webseite auf Mobilgeräten korrekt und kompatibel angezeigt wird. Es ist ein Eckpfeiler des responsiven Designs.

Beschreibung:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Parameter:

width=device-width: Setzt die Bildschirmbreite auf die tatsächliche Pixelbreite des Geräts.
initial-scale=1: Die Seite wird beim ersten Laden mit einer Zoomstufe von 100 % (Zoom 1) angezeigt.
shrink-to-fit=no: Verhindert, dass der Inhalt verkleinert wird, um in die Bildschirmgröße zu passen. Wird hauptsächlich in Safari verwendet.

Warum ist es notwendig?

Verhindert Darstellungsfehler auf Mobilgeräten.
Responsive CSS-Frameworks (z. B. Bootstrap) machen dieses Tag obligatorisch.
Da die Standardbreite von Browsern normalerweise 980 Pixel beträgt, funktioniert mobilkompatibles CSS nicht ohne dieses Tag.

Beispiel für die Verwendung mit mobilkompatiblem CSS:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="style.css">
</head>

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px;
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
  .menu {
    flex-direction: column;
  }
}

Zusammenfassung:

Ohne dieses Meta-Tag funktionieren responsive CSS-Codes nicht effektiv. Es muss unbedingt zwischen den <head>-Tags verwendet werden, um sicherzustellen, dass Ihre Seite auf Mobilgeräten korrekt gerendert wird. Insbesondere in modernen Frontend-Entwicklungsprozessen sollte es standardmäßig enthalten sein.