<meta name="text-scale">

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Der text-scale Wert für das name-Attribut eines <meta>-Elements ermöglicht es, dass die Seite in den anfänglichen font-size-Maßstab des <html>-Root-Elements im Verhältnis zu den Textskalierungseinstellungen des Betriebssystems und Browsers eintritt.

Warnung: Wenn Sie <meta name="text-scale" content="scale" /> auf Ihrer Website einfügen, um dieses Verhalten der Textskalierung zu aktivieren, müssen Sie sicherstellen, dass die Unterstützung von Textgrößen bis zum maximalen Textskalierungsfaktor für Ihre Zielplattformen gegeben ist. Dies reicht typischerweise von 200 % bis über 300 % auf mobilen Plattformen, wobei einige Barrierefreiheitsfunktionen sogar noch größere Textskalierungen ermöglichen. Stellen Sie sicher, dass Ihre Website nicht fehlerhaft aussieht, wenn Nutzer größere oder kleinere Schriftgrößeinstellungen im Betriebssystem vornehmen.

Verwendungshinweise

Ein <meta name="text-scale">-Element hat folgende zusätzliche Attribute:

content

Gibt das Verhalten der font-size-Skalierung an. Sein Wert ist ein Schlüsselwort, das eines der folgenden sein kann:

scale: Optiert die Seite, indem das anfängliche font-size-Verhältnis des <html>-Root-Elements im Verhältnis zu den Textskalierungseinstellungen des Betriebssystems und Browsers skaliert wird. Es führt auch dazu, dass der Browser bestehende browserbasierte Mechanismen und Heuristiken deaktiviert (z. B. automatische Textgrößenanpassung auf mobilen Geräten).
legacy: Der Standardwert. Die Seite wird nicht in die Skalierung der font-size des Root-Elements im Verhältnis zu den Textskalierungseinstellungen des Betriebssystems und Browsers eingebunden. Dies hat denselben Effekt wie das völlige Weglassen des <meta>-Elements (Betriebssystem-Schriftvoreinstellungen werden ignoriert).

Beschreibung

Das <meta name="text-scale" content="scale" />-Element kann in den <head> eines Dokuments eingefügt werden, um dem Browser zu signalisieren, dass die Seite in einer Weise skaliert ist, die über verschiedene vom Nutzer ausgewählte Schriftgrößeneinstellungen hinweg gut dargestellt wird; es deaktiviert auch bestehende browserbasierte Mechanismen und Heuristiken.

Insbesondere definiert es den Wert der anfänglichen font-size des <html>-Root-Elements, um proportional zu benutzerdefinierten Betriebssystem- und Browserschriftgrößeneinstellungen zu skalieren. Der initial-Wert der Root-font-size ist medium, was den Wert der rem-Einheit definiert. Vorausgesetzt, Sie setzen oder erlauben die Voreinstellung der font-size des Root-Elements auf eine lokale oder root-schriftverwandte <Länge> Einheit, wird jedes nachfolgende Schlüsselwort (wie medium) oder jede schriftverwandte Länge (wie em und rem) proportional zu den Betriebssystem- oder Browserschriftgrößeneinstellungen skaliert.

Zum Beispiel führt die Aufnahme von <meta name="text-scale" content="scale"> auf der Seite dazu, dass die folgende Regel:

css

p {
  font-size: medium;
}

dazu führt, dass alle <p>-Elemente eine skalierte Schriftgröße erhalten. Sie könnten auch font-size auf initial setzen, um denselben Effekt zu erzielen.

Auf mobilen Plattformen ist dies standardmäßig nicht der Fall. <meta name="text-scale" content="scale" /> aktiviert diese Skalierung. Auf Desktop-Plattformen bewirkt es, dass die env(preferred-text-scale) Umgebung eine Zahl widergibt, die dem Multiplikator entspricht, der auf Browserschriftgrößeinstellungen basiert, aber sonst hat es keinen erkennbaren Vorteil.

Zusammenfassung der Verwendung

Zusammengefasst, setzen Sie scale nur, wenn Ihre Anwendung so gestaltet ist, dass sie die Schriftgrößenanpassung unterstützt. Empfohlene Verwendung:

Fügen Sie <meta name="text-scale" content="scale" /> im <head> Ihrer Seite ein.
Überschreiben Sie nicht die anfängliche :root font-size mit einem absoluten Längenwert (wie 16px).
Verwenden Sie nur schriftverwandte Einheiten wie em/rem oder Schlüsselwörter wie small, x-large usw., um Inhalte zu dimensionieren.

`<meta name="text-scale">` versus `env(preferred-text-scale)`

Die Verwendung von <meta name="text-scale" />, um Dimensionen im Verhältnis zu den Textskalierungseinstellungen des Betriebssystems zu dimensionieren, wird gegenüber der env(preferred-text-scale) Umgebung empfohlen. Sie haben auf mobilen Geräten einen ähnlichen Effekt, aber <meta> bietet auch Verbesserungen für Desktop-Browser (und ist einfacher zu verwenden).

Vermeiden Sie die gleichzeitige Verwendung beider Funktionen, da die Textskalierung möglicherweise zweimal angewandt wird, wodurch kleine schriftverwandte Dimensionen kleiner und große schriftverwandte Dimensionen größer werden.

Beispiele

Meta-Viewport-Textskalierungs-Demonstration

Dieses Beispiel zeigt die Wirkung von <meta name="text-scale" content="scale">.

HTML

Wir fügen das <meta name="text-scale" content="scale">-Element im <head> des Dokuments ein, sowie ein <meta name="viewport">-Element, um eine korrekte Anzeige auf mobilen Geräten zu gewährleisten. Wir platzieren auch einige Textinhalte in <p>-Elemente mit verschiedenen class-Attributen, die es uns erlauben, sie mit unterschiedlichen Stilen anzusprechen.

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta name="text-scale" content="scale" />
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>
    <p class="text-scale">
      This font size obeys the user's font preferences, whether those
      preferences are specified at the operating system level or the user agent
      level.
    </p>
    <p class="fixed">
      This font size does NOT respect the user's font preferences, even with
      text-scale set.
      <span class="text-scale">But this font size does!</span>
    </p>
  </body>
</html>

<!doctype html>
<html lang="en-US">
  <head>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>
    <p class="text-scale">
      This font size does not obey the user's font preferences, whether those
      preferences are specified at the operating system level or the user agent
      level.
    </p>
    <p class="fixed">
      This font size does NOT respect the user's font preferences.
      <span class="text-scale">Neither does this!</span>
    </p>
  </body>
</html>

CSS

Textcontainer mit einer class von text-scale erhalten eine font-size von 1rem, was bedeutet, dass in Browsern, die <meta name="text-scale" content="scale"> unterstützen, dieser Text skaliert wird, wenn die OS/Browser-Schriftgrößeneinstellungen geändert werden. Textcontainer mit einer class von fixed erhalten eine font-size von 20px, was bedeutet, dass dieser Text in einer festen Größe bleibt, wenn die OS/Browser-Schriftgrößeneinstellungen geändert werden.

css

.text-scale {
  font-size: 1rem;
}

.fixed {
  font-size: 20px;
}

Ergebnis

Diese Version enthält das <meta name="text-scale">-Element:

Diese Version enthält NICHT das <meta name="text-scale">-Element:

Testen Sie diese Beispiele in einem mobilen Browser. Ändern Sie die bevorzugte Schriftgröße in den Anzeige- oder Barrierefreiheitseinstellungen des mobilen Geräts. Beachten Sie, wie im ersten Beispiel, wenn <meta name="text-scale"> enthalten ist, die Ober- und Unterzeilen des Textes proportional zu den OS-Einstellungen skalieren, während die mittlere Zeile, deren font-size mit absoluten Einheiten gesetzt ist, nicht ihre Größe ändert. Ohne das <meta name="text-scale">-Element wird der Text nicht proportional zu den OS-Einstellungen skaliert.

Um das Testen zu erleichtern, können Sie beide Versionen in einem separaten Tab im Vollbildmodus mit den untenstehenden Links öffnen:

Beispiel mit <meta name="text-scale">
Beispiel ohne <meta name="text-scale">

Ein textskalierungsresponsives Layout

Dieses Beispiel zeigt, dass mit <meta name="text-scale"> auf einer Seite, schriftverwandte Größen innerhalb von @media Abfragen verwendet werden können, um mobile Browser automatisch Breakpoints anpassen zu lassen, wenn die OS-Schriftgröße geändert wird.

HTML

Wie im vorherigen Beispiel enthält unser Markup wieder die <meta name="text-scale"> und <meta name="viewport"> Elemente im <head>. In diesem Demo enthalten die Hauptinhalte zwei Elemente — <main> und <aside> — um eine Hauptinhaltsspalte und eine Seitenleiste darzustellen.

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta name="text-scale" content="scale" />
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>
    <main>Main content</main>
    <aside>Aside content</aside>
  </body>
</html>

CSS

Standardmäßig werden der Hauptinhalt und die Seitenleiste untereinander angeordnet. Wir fügen eine @media Abfrage ein, die die Elemente nebeneinander mit CSS Grid anordnet, wenn der Viewport breiter als 35rem wird.

body {
  margin: 0;
}

main,
aside {
  background-color: silver;
  padding: 24px;
  font-size: 1.5rem;
}

css

@media (width > 35rem) {
  body {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr 18.75rem;
  }
}

Ergebnis

Testen Sie dies in einem mobilen Browser. Sie werden sehen, dass bei Erhöhung der OS-Schriftgröße die Größe des Breakpoints proportional erhöht wird. Bei größeren Schriftgrößen des Betriebssystems erscheinen der Hauptinhalt und die Seite übereinander, während sie vorher nebeneinander erschienen. Sie müssen es möglicherweise in der horizontalen Ausrichtung ansehen, um den Effekt zu sehen.

Sie können das Demo in einem separaten Tab mit dem untenstehenden Link zum einfacheren Testen öffnen:

Responsives Layout-Beispiel

Spezifikationen

Spezifikation
CSS Fonts Module Level 5 # text-scale-meta

Browser-Kompatibilität

Siehe auch

env(preferred-text-scale)
[meta text-scale] Unterstützung für WebView auf chromium.googlesource.com (2026)

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden