Ausführbare HTML-Docs: Meta Viewport

Q: Wie lautet das Standard-Meta-Viewport-Tag?

, in . Es ist für fast jede responsive Seite die richtige Wahl.

Q: Warum funktioniert mein Meta Viewport nicht?

Prüf, ob das Tag in steht, ob name den Wert viewport hat und die Werte durch Kommas getrennt sind. Wenn die Seite trotzdem seitwärts scrollt, ist irgendein Element breiter als der Bildschirm, etwa eine feste Breite, ein großes Bild oder ein langes Wort; das Tag kann kein CSS reparieren, das breiter als das Gerät ist.

Das Tag, das du verwendest

Setz diese Zeile in den <head> jeder Seite:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width macht das Layout so breit wie den Bildschirm, und initial-scale=1 öffnet die Seite mit 100 % Zoom. Mehr brauchen die meisten Websites nicht. Eine ganze Seite mit dem Tag:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Viewport</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Hello, phone</h1>
  <p id="out"></p>
  <script>
    const meta = document.querySelector('meta[name="viewport"]');
    document.getElementById('out').textContent =
      'Viewport tag: "' + meta.content + '". Layout width here: ' + innerWidth + 'px.';
  </script>
</body>
</html>

Das Skript liest das Tag und die Layoutbreite aus. Desktop-Browser ignorieren das viewport-Tag, in dieser Vorschau ist die Breite also einfach die Breite des Vorschaukastens. Auf einem Handy meldet dieselbe Datei wegen des Tags die Breite des Handys (typischerweise 360 bis 430 CSS-Pixel).

Was Handys ohne das Tag tun

Ein mobiler Browser, der kein viewport-Tag findet, nimmt an, dass die Seite für den Desktop gebaut wurde. Er baut die Seite etwa 980 Pixel breit auf und verkleinert dann das Ganze auf Bildschirmgröße. Die beiden nachgebauten Handys unten laden dieselbe Seite, einmal mit 980px Layoutbreite und einmal mit Handybreite, beide auf dieselbe Größe skaliert:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>With and without</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .phones { display: flex; gap: 24px; flex-wrap: wrap; }
    figure { margin: 0; width: 180px; }
    .phone { width: 180px; height: 320px; overflow: hidden; border: 6px solid #111827; border-radius: 16px; }
    iframe { border: 0; transform-origin: 0 0; background: #fff; }
    figcaption { font-size: 13px; margin-top: 6px; }
  </style>
</head>
<body>
  <div class="phones">
    <figure>
      <div class="phone"><iframe id="without" title="Page at 980px"></iframe></div>
      <figcaption>No viewport tag: laid out at 980px, shrunk</figcaption>
    </figure>
    <figure>
      <div class="phone"><iframe id="with" title="Page at 375px"></iframe></div>
      <figcaption>With the tag: laid out at 375px</figcaption>
    </figure>
  </div>
  <script>
    const page = `<style>
      body { font: 16px system-ui, sans-serif; margin: 12px; }
      .cols { display: flex; gap: 12px; }
      .cols div { flex: 1; background: #dbeafe; padding: 12px; }
      @media (max-width: 600px) { .cols { flex-direction: column; } }
    </style>
    <h1>My site</h1>
    <p>This paragraph is set at 16px, a comfortable size to read.</p>
    <div class="cols"><div>Column one</div><div>Column two</div></div>`;
    function show(id, layoutWidth) {
      const frame = document.getElementById(id);
      const scale = 180 / layoutWidth;
      frame.width = layoutWidth;
      frame.height = Math.round(320 / scale);
      frame.style.transform = 'scale(' + scale + ')';
      frame.srcdoc = page;
    }
    show('without', 980);
    show('with', 375);
  </script>
</body>
</html>

Auf dem ersten Handy wird der 16px-Text winzig, und der Leser muss mit zwei Fingern zoomen. Auf dem zweiten bleibt er lesbar, und die Spalten stapeln sich, weil die Regel @media (max-width: 600px) greift. Das ist die zweite Aufgabe des Tags: Media Queries sehen die Layoutbreite, ohne das Tag meldet ein Handy also 980px, und deine mobilen Styles greifen nie. Ändere 375 in show('with', 375) zu 980, und beide Handys sehen gleich aus.

Das Tag ist nur die halbe Arbeit

Das viewport-Tag gibt dir ein schmales Layout; dein CSS muss hineinpassen. Ein einziges Element mit fester Breite, die größer ist als der Bildschirm, lässt die ganze Seite seitwärts scrollen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fitting the width</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .screen { width: 300px; border: 2px solid #111827; padding: 8px; margin-bottom: 12px; overflow-x: auto; }
    .banner { background: #f59e0b; height: 60px; }
    .fixed { width: 480px; }
    .fluid { max-width: 100%; width: 480px; }
  </style>
</head>
<body>
  <p>A 300px wide screen:</p>
  <div class="screen"><div class="banner fixed">width: 480px</div></div>
  <div class="screen"><div class="banner fluid">max-width: 100%</div></div>
</body>
</html>

Der erste Kasten scrollt seitwärts; der zweite schrumpft passend. Gib Bildern und anderen breiten Elementen max-width: 100% und nimm lieber flexible Breiten (Prozente, fr, Flexbox) statt fester Pixelbreiten.

Viewport-Werte

Wert	Beispiel	Was er macht
`width`	`width=device-width`	Layoutbreite. `device-width` ist die Bildschirmbreite in CSS-Pixeln; eine Zahl ist auch erlaubt, aber selten eine gute Idee.
`initial-scale`	`initial-scale=1`	Zoomstufe beim Öffnen der Seite.
`minimum-scale` / `maximum-scale`	`maximum-scale=5`	Grenzen für das Zoomen. Ein niedriges Maximum sperrt den Zoom, lass `maximum-scale` also weg.
`user-scalable`	`user-scalable=yes`	Ob Zoomen mit zwei Fingern erlaubt ist. Lass es weg.
`viewport-fit`	`viewport-fit=cover`	Lässt die Seite unter eine Notch oder abgerundete Ecken reichen, zusammen mit Innenabstand über `env(safe-area-inset-*)`.
`interactive-widget`	`interactive-widget=resizes-content`	Wie die Bildschirmtastatur das Layout beeinflusst. Wird von Chrome auf Android unterstützt.

Die Werte werden durch Kommas getrennt. Eine Seite, die auf Handys mit Notch den ganzen Bildschirm füllt, sieht so aus:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>

Zoomen nicht sperren

In älteren Templates findest du dieses Tag:

<!-- Avoid: stops people from zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Es verhindert das Zoomen mit zwei Fingern, auf das Menschen mit Sehschwäche angewiesen sind, und Prüfwerkzeuge für Barrierefreiheit wie Lighthouse melden es. Safari auf iOS ignoriert user-scalable=no, das Tag funktioniert also nicht einmal einheitlich. Wenn ein Formularfeld auf dem iPhone beim Antippen hineinzoomt, liegt es an einer Schriftgröße unter 16px im Input; setz die font-size des Inputs auf mindestens 16px, statt den Zoom abzuschalten.

Häufige Fehler

Das Tag vergessen. Ein responsives Stylesheet bewirkt auf Handys ohne das Tag nichts, weil Media Queries ein 980px breites Layout sehen. Setz es in deinem Seiten-Template neben das Title-Tag.
Semikolons zwischen den Werten. Nimm Kommas: width=device-width, initial-scale=1.
Eine feste Breite eintragen, etwa width=375. Bildschirme sind verschieden; nimm device-width.
Zoom abschalten mit user-scalable=no oder maximum-scale=1.
Dem Tag die Schuld am seitlichen Scrollen geben. Such das Element, das breiter ist als der Bildschirm, und gib ihm eine flexible Breite.

Häufig gestellte Fragen

Was macht das Meta-Viewport-Tag?

Es sagt mobilen Browsern, wie breit das Layout sein soll. Ohne es bauen die meisten Handys die Seite mit etwa 980 CSS-Pixeln auf und verkleinern sie auf Bildschirmgröße. Mit width=device-width entspricht das Layout der Bildschirmbreite, Text bleibt also lesbar, und Media Queries funktionieren.

Wie lautet das Standard-Meta-Viewport-Tag?

<meta name="viewport" content="width=device-width, initial-scale=1">, in <head>. Es ist für fast jede responsive Seite die richtige Wahl.

Warum funktioniert mein Meta Viewport nicht?

Prüf, ob das Tag in <head> steht, ob name den Wert viewport hat und die Werte durch Kommas getrennt sind. Wenn die Seite trotzdem seitwärts scrollt, ist irgendein Element breiter als der Bildschirm, etwa eine feste Breite, ein großes Bild oder ein langes Wort; das Tag kann kein CSS reparieren, das breiter als das Gerät ist.

Soll ich user-scalable=no oder maximum-scale=1 verwenden?

Nein. Beides hindert Menschen am Zoomen, worauf viele Nutzer mit Sehschwäche angewiesen sind, und fällt bei Barrierefreiheitsprüfungen durch. Safari auf iOS ignoriert user-scalable=no sowieso.

Wirkt das Meta-Viewport-Tag in Desktop-Browsern?

Nein. Desktop-Browser ignorieren es; dort ist die Layoutbreite einfach die Fensterbreite. Das Tag zählt auf Handys und Tablets.

Verwandte Konzepte