text-size-adjust CSS property
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.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die text-size-adjust CSS-Eigenschaft steuert den Textvergrößerungsalgorithmus, der auf einigen Smartphones und Tablets verwendet wird. Andere Browser ignorieren diese Eigenschaft.
Da viele Websites nicht für kleine Geräte entwickelt wurden, unterscheiden sich mobile Browser von Desktop-Browsern in der Art und Weise, wie sie Webseiten rendern. Anstatt Seiten in der Breite des Gerätsbildschirms darzustellen, verwenden sie ein Viewport, das viel breiter ist, in der Regel 800 oder 1000 Pixel. Um das extra breite Layout auf die ursprüngliche Größe des Geräts zurückzuführen, zeigen sie entweder nur einen Teil des gesamten Renders oder skalieren das Viewport nach unten, um es anzupassen.
Da Text, der herunterskaliert wurde, um auf einen mobilen Bildschirm zu passen, sehr klein sein kann, wenden viele mobile Browser einen Textvergrößerungsalgorithmus an, um den Text zu vergrößern und besser lesbar zu machen. Wenn ein Element, das Text enthält, 100 % der Breite des Bildschirms nutzt, erhöht der Algorithmus seine Textgröße, ohne das Layout zu ändern. Die text-size-adjust-Eigenschaft ermöglicht es Webautoren, dieses Verhalten zu deaktivieren oder zu modifizieren, da Webseiten, die für kleine Bildschirme entwickelt wurden, es nicht benötigen.
Syntax
/* Keyword values */
text-size-adjust: none;
text-size-adjust: auto;
/* <percentage> value */
text-size-adjust: 80%;
/* Global values */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: revert;
text-size-adjust: revert-layer;
text-size-adjust: unset;
Werte
Diese Eigenschaft wird als einer der folgenden Werte angegeben:
none-
Deaktiviert den Vergrößerungsalgorithmus des Browsers.
auto-
Aktiviert den Vergrößerungsalgorithmus des Browsers. Dieser Wert wird verwendet, um einen zuvor mit CSS festgelegten Wert
nonerückgängig zu machen. <percentage>-
Aktiviert den Vergrößerungsalgorithmus des Browsers und gibt einen Prozentwert an, mit dem die Schriftgröße erhöht werden soll.
Formale Definition
| Anfangswert | auto für Smartphone Browser, die Befüllung unterstützen, none andererseits (und dann unveränderbar). |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Prozentwerte | ja, beziehen sich auf die entsprechende Größe der Schriftart |
| Berechneter Wert | wie angegeben |
| Animationstyp | by computed value type |
Formale Syntax
text-size-adjust =
auto |
none |
<percentage [0,∞]>
Beispiele
Grundlegende Deaktivierungsnutzung
Wie oben angedeutet, ist das text-size-adjust-Verhalten auf einer richtig gestalteten responsiven Seite nicht notwendig, daher können Entwickler wählen, es durch Angabe eines Wertes von none zu deaktivieren:
p {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
Spezifikationen
| Spezifikation |
|---|
| CSS Mobile Text Size Adjustment Module Level 1 # adjustment-control |
Browser-Kompatibilität
Siehe auch
- Apple's Dokumentation (2016)
- Beschreibung des Verhaltens von Google Chrome (2014)
- Beschreibung des Verhaltens von Gecko von L. David Baron (2011)