Web/CSS/text-size-adjust

This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.

The text-size-adjust CSS property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property.

/* 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: unset;

Because many websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages. Instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. To map the extra-wide layout back to the original device size, they either show only part of the whole render or scale the viewport down to fit.

Since text that has been scaled down to fit a mobile screen may be very small, many mobile browsers apply a text inflation algorithm to enlarge the text to make it more readable. When an element containing text uses 100% of the screen's width, the algorithm increases its text size, but without modifying the layout. The text-size-adjust property allows web authors to disable or modify this behavior, as web pages designed with small screens in mind do not need it.

Syntax

The text-size-adjust property is specified as none, auto, or a <percentage>.

Values

none: Disables the browser's inflation algorithm.
auto: Enables the browser's inflation algorithm. This value is used to cancel a none value previously set with CSS.
<percentage>: Enables the browser's inflation algorithm, specifying a percentage value with which to increase the font size.

Formal definition

Initial value	`auto` for smartphone browsers supporting inflation, `none` in other cases (and then not modifiable).
Applies to	all elements
Inherited	yes
Percentages	yes, refer to the corresponding size of the text font
Computed value	as specified
Animation type	discrete

Formal syntax

none | auto | <percentage>

Examples

Basic disabling usage

As hinted at above, on a properly designed responsive site the text-size-adjust behavior is not needed, so developers can elect to turn it off by specifying a vlaue of none:

p {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

Specifications

Specification	Status	Comment
CSS Mobile Text Size Adjustment Module Level 1The definition of 'text-size-adjust' in that specification.	Editor's Draft	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`text-size-adjust` Experimental'	Chrome Full support 54 Full support 54 No support No Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' 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 Full support 79 Full support 79 No support 12 — 79 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox No support No	IE No support No	Opera Full support 41	Safari No support No No support No No support No Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' 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 Full support 54	Chrome Android Full support 54	Firefox Android Full support 49 Prefixed' Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 14 Prefixed' Prefixed' Implemented with the vendor prefix: -moz- Full support 44 Prefixed' Disabled' Prefixed' Implemented with the vendor prefix: -webkit- Disabled' 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 Full support 41	Safari iOS Full support 1 Prefixed' Full support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 6.0
`<percentage>` Experimental'	Chrome Full support 54	Edge Full support 12	Firefox No support No	IE No support No	Opera Full support 41	Safari No support No	WebView Android Full support 54	Chrome Android Full support 54	Firefox Android No support No	Opera Android Full support 41	Safari iOS No support No	Samsung Internet Android Full support 6.0

Legend

Full support: Full support
No support: No support
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.