This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The text-size-adjust
property allows control over the text inflation algorithm used on some mobile devices. As this property is non-standard, it must be prefixed: -moz-text-size-adjust
, -webkit-text-size-adjust
, and -ms-text-size-adjust
.
/* 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;
Because many web pages have not been developed with mobile in mind, smartphone browsers differ from desktop browsers in the way they display web pages. 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 800 or 1000 pixels wide. To map the wide layout back to the original device size, the browser either shows only part of the whole render, or the viewport is scaled down to fit.
Because text that has been scaled down to fit a small screen is very small, many mobile browsers apply a text inflation algorithm to make the text larger and more readable. When an element containing text uses 100% of the screen's width, its text size is increased until it reached a readable size, but without modifying the layout.
The text-size-adjust
property allows web authors to opt out or modify this behavior, as web pages designed to handle small screen widths do not need it.
-webkit-text-size-adjust
is explicitly set to none
, older WebKit-based desktop and tablet browsers, like Chrome≤26 or Safari≤5, instead of ignoring the property, will prevent the user from zooming in or out on the web page.#
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 |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
The text-size-adjust
property is specified as none
, auto
, or a <percentage>
.
none
auto
none
value previously set with CSS.<percentage>
none | auto | <percentage>
Specification | Status | Comment |
---|---|---|
CSS Mobile Text Size Adjustment Module Level 1 The definition of 'text-size-adjust' in that specification. | Editor's Draft | Initial definition |
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support |
54 |
Yes -ms- Yes -webkit- |
No | No | 42 |
No |
<percentage> |
? | Yes | No | No | No | No |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Basic support | 54 | 54 |
Yes -ms- Yes -webkit- |
Yes -moz- 49 -webkit- |
42 | Yes -webkit- | ? |
<percentage> |
? | ? | Yes | No | No | Yes | ? |
1. 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.
2. 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.
3. 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.
© 2005–2018 Mozilla Developer Network 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