W3cubDocs

/CSS

text-size-adjust

This is an experimental technology
Check 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

Browser compatibilityUpdate compatibility data on GitHub

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

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust