Viewport-Meta-Tag-Generator für responsive Websites

Wählen Sie device-width für die übliche mobilfreundliche Deklaration oder geben Sie für einen bewusst festen Viewport eine positive numerische Breite ein und legen Sie anschließend die Startskalierung fest. Das Ergebnis enthält einen vollständigen HTML-Tag für den head des Dokuments, seinen content-Wert und normalisierte Einstellungen für Skripte, Vorlagen, Tests und automatisierte Build-Pipelines.

Wählen Sie die Viewport-Breite bewusst

Eine Viewport-Deklaration teilt einem mobilen Browser mit, wie sich der Layout-Viewport der Seite zum Bildschirm verhalten soll. Für die meisten responsiven Websites ist device-width die richtige Einstellung, weil sie der Gerätebreite in CSS-Pixeln folgt und Media Queries auf den verfügbaren Platz reagieren lässt. Dieser Generator akzeptiert außerdem eine positive numerische Breite, wenn ein kontrollierter fester Viewport tatsächlich erforderlich ist, etwa für eine ältere eingebettete Oberfläche, eine reproduzierbare Browser-Testumgebung oder einen Kompatibilitätstest. Geben Sie die Zahl ohne px-Suffix ein: 375 ist gültig, 375px dagegen kein gültiger Breitenwert in dieser Deklaration. Null, negative Werte, leere Eingaben, nicht endliche Werte und beliebige Wörter werden abgewiesen, statt in scheinbar plausibles, aber unzutreffendes Markup eingesetzt zu werden. Die zurückgegebene Breite wird normalisiert; numerischer Text wie 375 wird zum stabilen Fragment width=375. Damit eignet sich die Ausgabe für Automatisierung: Ein Erfolg bedeutet stets das exakte Standard-Schlüsselwort oder eine positive Zahl, ohne verborgene Rechtschreibkorrektur oder browserabhängige Annahmen.

Legen Sie die Startskalierung fest und kopieren Sie den Tag

Die Startskalierung bestimmt die Zoomstufe beim ersten Laden der Seite. Der Wert 1 ist die übliche Wahl: Ein CSS-Pixel entspricht einem CSS-Pixel des Viewports, bevor der Benutzer zoomt. Das Feld verwendet standardmäßig 1; für besondere Test- oder Anwendungsanforderungen können Sie jedoch eine andere positive, endliche Zahl angeben. Der Generator prüft diese Einstellung separat und bewahrt ihre numerische Bedeutung in einer stabilen Textform. Anschließend erzeugt er einen vollständigen Tag wie <meta name="viewport" content="width=device-width, initial-scale=1">. Platzieren Sie ihn möglichst genau einmal im head des Dokuments, statt mehrere Viewport-Deklarationen anzuhängen, deren Zusammenspiel je nach Browser abweichen kann. Die Antwort stellt zusätzlich die content-Zeichenfolge sowie die normalisierten Felder width und initial_scale bereit. Verwenden Sie meta_tag beim Schreiben von HTML, content für Frameworks, die nur dieses Attribut erwarten, und die Einzelfelder für Konfigurationsprüfungen. Netzwerkanfragen, Seiteninspektionen oder User-Agent-Erkennung ändern das Ergebnis nicht; identische Eingaben liefern im Browser und über die API immer identische Ausgaben.

Beachten Sie, was der Generator nicht ergänzt

Diese Fähigkeit erzeugt absichtlich nur width und initial-scale. Sie ergänzt weder maximum-scale, minimum-scale, user-scalable, viewport-fit, interactive-widget noch andere optionale Direktiven, weil diese Einstellungen Produkt- und Barrierefreiheitsentscheidungen statt automatischer Vorgaben erfordern. Insbesondere kann eine Zoom-Beschränkung Inhalte für Menschen erschweren, die Vergrößerung benötigen; ein kompakter Generator sollte dieses Verhalten daher nicht unbemerkt einführen. Das Werkzeug prüft auch keine bestehende Seite, erkennt keine doppelten Tags, testet keine responsiven Breakpoints und belegt nicht, dass das CSS selbst responsiv ist. Es erstellt deterministisches Markup aus den beiden gelieferten Einstellungen. Prüfen Sie die Seite danach bei schmalen und breiten Größen, achten Sie auf lesbaren Text und überlaufende Bedienelemente und testen Sie den Zoom in echten Browsern. Bewahren Sie die Deklaration bei Vorlagenprojekten in der gemeinsamen head-Komponente auf, damit jede Route dieselbe Richtlinie erhält. Die interaktive Nutzung ist im Browser kostenlos; eine automatisierte API-Anfrage kostet $0.002. Da derselbe reine Solver beide Wege bedient, kann ein manuell geprüfter Tag ohne geänderte Formatierung oder Validierung in ein Build-Skript übernommen werden.