text-size-adjust
Quick Summary for text-size-adjust
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Code Usage for text-size-adjust
/* 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: revert; text-size-adjust: unset; 
More Details for text-size-adjust

text-size-adjust

Experimental: 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: revert; 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 valueauto for smartphone browsers supporting inflation, none in other cases (and then not modifiable).
Applies toall elements
Inheritedyes
Percentagesyes, refer to the corresponding size of the text font
Computed valueas specified
Animation typediscrete

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 value of none:

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

Specifications

Specification
CSS Mobile Text Size Adjustment Module Level 1 # adjustment-control

See also

Apple's documentation Gecko's behavior description, by L. David Baron Microsoft's documentation

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)Français日本語Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


James Clear
Random CSS Property

z-index

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
z-index css reference