这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
text-size-adjust 属性 允许我们控制将文本溢出算法应用到一些手机设备上。这个属性还没有写进标准，使用时必须加上前缀：-moz-text-size-adjust，-webkit-text-size-adjust,，和 -ms-text-size-adjust。
许多网页还没有用手机开发，智能手机浏览器和桌面浏览器渲染网页时在一些地方有不同。他们不是以设备屏幕宽度布局网页，而是用比屏幕宽一些的视窗去布局网页，通常是800到1000像素。为了将视窗上的布局映射到原始设备屏幕上，手机浏览器要么只渲染整个页面的一部分，要么将视窗缩放至原始屏幕大小。
因为缩放适配小屏幕而导致文字会变得很小，许多手机浏览器会使用文本溢出算法让文本变大而更易读。当一个包含文本的元素宽度用了100%，他的文本大小会增加直到达到一个易读的大小，但是不会修改布局。
text-size-adjust 这个属性允许开发者去除或者修改这个浏览器默认行为，因为当网页设计已经处理小屏幕的宽度问题时不需要他。
- 这个属性并不是标准。 你必须为每个你想要应用的浏览器加上属性前缀。
- 不同浏览器，这个属性有不同的行为和语法。更多的信息，请查看下面的浏览器兼容性部分。
- 这个属性只有在一些智能手机和平板电脑上使用。 桌面浏览器和一些平板电脑浏览器并没有一些溢出算法。
- 如果
-webkit-text-size-adjust显式设置为none, 老的基于桌面的WebKit和平板电脑浏览器，像 Chrome≤26 或者 Safari≤5, 不会忽略这个属性, 反而会阻止用户在web界面放大或缩小。# - 不是所有的浏览器都支持这个属性使用百分比值(例如 Webkit 和 Trident , 但是 Gecko不支持). 检查下面浏览器兼容的部分查看更多的信息。
| 初始值 | auto for smartphone browsers supporting inflation, none in other cases (and then not modifiable). |
|---|---|
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| Percentages | yes, refer to the corresponding size of the text font |
| 适用媒体 | visual |
| 计算值 | as specified |
| Animation type | discrete |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
/* 文本不会放大 */ text-size-adjust: none; /* 文本可能会被放大 */ text-size-adjust: auto; /* 文本固定为原大小的80% */ text-size-adjust: 80%; /* 全局的值 */ text-size-adjust: inherit; text-size-adjust: initial; text-size-adjust: unset;
text-size-adjust 属性的值为auto，none， 百分比。
Values
none- 禁用浏览器的文本溢出算法。在老的基于webkit内核的桌面端浏览器，这将阻止用户将网页放大或缩小。
auto- 启用 浏览器的文本溢出算法。该值用于取消先前使用CSS设置的none。
<percentage>- 启用 浏览器的文本溢出算法，具体用一个百分数来确定文本放大范围。
Formal syntax
none | auto | <percentage>
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Mobile Text Size Adjustment Module Level 1 text-size-adjust |
Editor's Draft | Initial definition |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 54.0[1] | (Yes)-ms (Yes)-webkit |
未实现 | 未实现 | 42 | 未实现[1] |
| Percentages | ? | (Yes) -ms | 未实现 | 未实现 | 未实现 | 未实现 |
| Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| Basic support | ? | 54.0[1] | (Yes)-ms (Yes)-webkit |
11.0 (11.0) -moz[2] | (Yes) -ms[3] 11-webkit |
42 | (Yes)-webkit | 54.0[1] |
| Percentages | ? | ? | (Yes) -ms | 未实现 | (Yes)[3] | 未实现 | (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
- Apple's documentation.
- Gecko's behavior description by L. David Baron.
- Microsoft's documentation.