text-size-adjust

Sie lesen die englische Version dieses Inhalts, da für dieses Gebietsschema noch keine Übersetzung vorhanden ist. Helfen Sie uns, diesen Artikel zu übersetzen!

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.

Auf mobilen Geräten, ermöglicht es die text-size-adjust Eigenschaft, Webautoren zu kontrollieren ob und wie der text-inflating Algorithmus sich auf den Textinhalt des Elements auswirkt.

Da diese Eigenschaft noch kein Standard ist, muss es zur Benutzung gepräfixt werden: -moz-text-size-adjust, -webkit-text-size-adjust, und -ms-text-size-adjust.

Browsers on smartphones don't display web pages using the same algorithms as browsers rendering web pages on desktop machines. Instead of laying out the web page at the width of the device screen, they lay it out using a viewport that is much wider than the device screen, usually of 800 or 1000 pixels wide. One of two possible methods is used to map back to the original device coordinates: either a smaller window is then used to display on the device screen only part of what is actually being rendered, or the viewport is stretched to the size of the device.

In essence, this means that either only a small, rectangular portion of the original web page is usually visible on a mobile device screen or that on mobile devices, the web page looks "zoomed out" and smaller than intended.

This approach has been used as numerous web sites are not able to cope with small screens and are not usable when using the classical layout algorithm. This technique has drawbacks: the text is so tiny that it is unreadable without zooming. Even so, the user experience is better with the classical approach, which often leads to put secondary content at the top of the smartphone display, effectively pushing the main content of the page outside the viewport.

But when the user zoomed in until the text becomes readable, an horizontal scrollbar is often needed as the line becomes larger than the width of the screen. This horizontal scrollbar has to be used to read each line of the text, which is a user experience nightmare. To prevent this, several mobile browsers implement a text inflation algorithm. When a focused element containing text use 100 % of the width of the screen, its text size is increased until it reached a readable size, without modifying the layout and removing the need of an horizontal scrollbar.

The text-size-adjust property allows Web authors to opt out from this behavior, as Web pages designed to handle small screen widths do not need it.

Notes:
  • This property is not standard. In order to use it, Web authors have to duplicate, or even triplicate it, prefixed for each engine supporting it.
  • Its behavior, and even the syntax, is slightly different from one browser engine to the other. Web developers should read the browser compatibility section with the required attention.
  • This property only has an effect on smartphones. As there is no inflation algorithm on desktop browsers, and on some tablet browsers like the iPad, the property is not supported there (and ignored). This property is only designed to opt out, or to cancel this opt-out, of the inflating behavior, not to opt in.
  • If -webkit-text-size-adjust is explicitly set to none, old versions of Webkit-based desktop and tablet browsers, like Chrome≤26 or Safari≤5, instead of ignoring the property, will prevent the user to zoom in or out the Web page.#
  • Not all engines do allow to control the final size of the text using a percentage value (E.g. Webkit and Trident do allow it, Gecko doesn't). Again Web developers should read the browser compatibility section with the required attention.
Initialwertauto für Smartphone Browser, die Befüllung unterstützen, none andererseits (und dann unveränderbar).
Anwendbar aufalle Elemente
VererbtJa
Prozentwerteja, beziehen sich auf die entsprechende Größe der Schriftart
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Text is never inflated */
text-size-adjust: none;

/* Text may be inflated */
text-size-adjust: auto;

/* Text may be inflated in this exact proportion */
text-size-adjust: 80%;

/* Global values */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: unset;

Values

none
Is a keyword preventing the usage of the inflation algorithm on the element. Basically, this means that the element will be displayed without its font inflated. On old WebKit-based desktop browsers (Chrome≤26, Safari≤5), this will instead prevent the user from zooming the webpage in or out.
auto
Is a keyword allowing the usage of the inflation algorithm on the element. Browsers are not forced to use it and they won't do it on desktops and on some tablets. Its main use is to cancel a none value previously set.
<percentage>
A percentage value is a synonym of the auto keyword, with the additional information that the percentage value is the increase rate to be applied to the font size when the inflation algorithm is applied.

Formal syntax

none | auto | <percentage>

Spezifikationen

Spezifikationen Status Kommentar
CSS Mobile Text Size Adjustment Module Level 1
Die Definition von 'text-size-adjust' in dieser Spezifikation.
Bearbeiterentwurf Initial definition

Browser-Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
text-size-adjust
Experimentell
Chrome Vollständige Unterstützung 54
Vollständige Unterstützung 54
Keine Unterstützung Nein
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise Instead of ignoring the -webkit-text-size-adjust property, a bug prevents desktop Chrome users from zooming in or out. The bug was fixed after Chrome 26.
Edge Vollständige Unterstützung 12
Mit Präfix
Vollständige Unterstützung 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Vollständige Unterstützung 41Safari Keine Unterstützung Nein
Keine Unterstützung Nein
Keine Unterstützung Nein
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise Instead of ignoring the -webkit-text-size-adjust property, a bug prevents desktop Safari users from zooming in or out. The bug was fixed after Safari 5.
WebView Android Vollständige Unterstützung 54Chrome Android Vollständige Unterstützung 54Firefox Android Vollständige Unterstützung 14
Mit Präfix
Vollständige Unterstützung 14
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 41Safari iOS Vollständige Unterstützung 1
Mit Präfix
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android Vollständige Unterstützung 6.0
<percentage>
Experimentell
Chrome Vollständige Unterstützung 54Edge Vollständige Unterstützung 12Firefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Vollständige Unterstützung 41Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 54Chrome Android Vollständige Unterstützung 54Firefox Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung 41Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch