Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

我们的志愿者还没有将这篇文章翻译为 中文 (简体)加入我们帮助完成翻译!

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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.

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.

Notes:
  • This property is non-standard. You must prefix the property name for each engine you wish to use it on.
  • This property's behavior and syntax varies from browser to browser. See the browser compatibility section below for more information.
  • This property only works on smartphones and some tablets. Desktop browsers and some tablet browsers have no inflation algorithm.
  • If -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.#
  • Not all engines that support this property allow the use of a percentage value (e.g. Webkit and Trident do, but Gecko doesn't). Check the browser compatibility section below for details.

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
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

/* 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;

Values

none
Disables the browser's inflation algorithm. On old WebKit-based desktop browsers (Chrome≤26, Safari≤5), this will instead prevent the user from zooming the webpage in or out.
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 syntax

none | auto | <percentage>

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 54.0[1] No support No support 42 No support[1]
Percentages ? No support No support No support No support
Feature Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support ? 54.0[1] 11.0 (11.0) -moz[2] (Yes) -ms[3]
11-webkit
42 (Yes)-webkit 54.0[1]
Percentages ? ? No support (Yes)[3] No support (Yes) ?

[1] There is a bug in older WebKit-based desktop browsers. If -webkit-text-size-adjust is explicitly set to none, older Webkit-based desktop browsers, instead of ignoring the property, will prevent the user from zooming in or out of the web page. See Bug 56543 (affected Safari≤5 & Chrome≤26), Bug 163359, and Bug 84186.

[2] In addition to the -moz- prefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit- prefixed version of the property for web compatibility reasons behind the layout.css.prefixes.webkit flag, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[3] If the viewport is set using <meta> element, the value of the CSS text-size-adjust property is ignored. See detailed implementation hints on MSDN.

See also

文档标签和贡献者

 最后编辑者: mfluehr,