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
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 |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-size-adjust | Chrome
Full support
54
| Edge
Full support
79
| 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
Full support
14
| Opera Android Full support 41 | Safari iOS
Full support
1
| Samsung Internet Android Full support 6.0 |
<percentage> | 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.
See also
- Apple's documentation
- Gecko's behavior description, by L. David Baron
- Microsoft's documentation