text-size-adjust property allows control over the text inflation algorithm applied by some mobile browsers on small screens. This algorithm enlarges text to enhance readability, but its default behavior may not be ideal for web pages designed with small devices in mind.
Note: The W3C Editor's Draft states that a more specific definition of "small device" is needed.
Examples and Usage
Due to the experimental nature of this property and its varying behavior across browsers, it's crucial to exercise caution if it's used in production to prevent unexpected problems.
With that in mind, here's a reference example of using relevant vendor prefixes:
/* Firefox */ -moz-text-size-adjust: /* value */; /* WebKit (Safari, Chrome, etc.) */ -webkit-text-size-adjust: /* value */; /* Edge */ -ms-text-size-adjust: /* value */;
Specific use cases can be found in the Useful Resources section from tried and tested approaches.
text-size-adjust property can accept the following values:
|Disables the browser's text inflation algorithm.|
|Allows usage of the inflation algorithm on the element; cancels a previously set |
|Similar to |
Tips and Considerations
Due to its experimental status, be cautious when using the
text-size-adjustproperty in production environments, as browser support and implementation may change.
Potentially consider using
text-size-adjustas part of your CSS reset or normalize styles to ensure consistent text sizing across different mobile browsers.
text-size-adjustcan help achieve more consistent text sizing, it's still important to create responsive designs that adapt well to various screen sizes and devices.
Always test your designs on multiple devices and browsers to ensure the desired appearance and behavior.
|Browser||Chrome||Edge||Safari||Firefox||Opera||Internet Explorer||iOS Safari||Android Browser||Opera Mobile||Chrome for Android||Firefox for Android|
Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.
Note: For specific version compatibility, vendor prefixes, and less-used browsers, refer to the first link in the Useful Resources section below.
W3C Editor's Draft: CSS Text Size Adjust Module Level 1
Safari Web Content Guide - Adjusting the Text Size
Information on Chromium’s Text Autosizer
CSS reset with
Specific use case and problems with
Use case for controlling text size in Safari for iOS without disabling user zoom