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.
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 Textinflationsalgorithmus, der auf einigen Smartphones und Tablets verwendet wird. Andere Browser ignorieren diese Eigenschaft.
Da viele Websites nicht mit kleinen Geräten im Hinterkopf entwickelt wurden, unterscheiden sich mobile Browser von Desktop-Browsern in der Art, wie sie Webseiten rendern. Anstatt die Seiten in der Breite des Gerätbildschirms anzuzeigen, nutzen sie einen Viewport, der viel breiter ist, üblicherweise 800 oder 1000 Pixel. Um das zu breite Layout auf die ursprüngliche Gerätegröße abzubilden, zeigen sie entweder nur einen Teil des gesamten Renders an oder skalieren den Viewport, um ihn anzupassen.
Da der auf eine mobile Anzeige skalierte Text sehr klein sein kann, wenden viele mobile Browser einen Textinflationsalgorithmus an, um den Text zu vergrößern und leserlicher zu machen. Wenn ein Element, das Text enthält, 100 % der Bildschirmbreite nutzt, vergrößert der Algorithmus die Textgröße, ohne das Layout zu ändern. Die text-size-adjust-Eigenschaft erlaubt es Web-Autoren, dieses Verhalten zu deaktivieren oder zu modifizieren, da Webseiten, die für kleine Bildschirme optimiert sind, dies 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;
Die text-size-adjust-Eigenschaft wird als none, auto oder <percentage> angegeben.
Werte
none-
Deaktiviert den Inflationsalgorithmus des Browsers.
auto-
Aktiviert den Inflationsalgorithmus des Browsers. Dieser Wert wird verwendet, um einen zuvor mit CSS gesetzten
none-Wert aufzuheben. <percentage>-
Aktiviert den Inflationsalgorithmus des Browsers und gibt einen prozentualen Wert an, um den die Schriftgröße vergrößert 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, wird das text-size-adjust-Verhalten auf einer ordnungsgemäß gestalteten responsiven Website nicht benötigt, daher können Entwickler es deaktivieren, indem sie den Wert none angeben:
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
- Apples Dokumentation (2016)
- Verhaltensbeschreibung von Google Chrome (2014)
- Geckos Verhaltensbeschreibung von L. David Baron (2011)