MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

text-size-adjust

这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

 text-size-adjust 属性 允许我们控制将文本溢出算法应用到一些手机设备上。这个属性还没有写进标准,使用时必须加上前缀:-moz-text-size-adjust-webkit-text-size-adjust,,和 -ms-text-size-adjust。

许多网页还没有用手机开发,智能手机浏览器和桌面浏览器渲染网页时在一些地方有不同。他们不是以设备屏幕宽度布局网页,而是用比屏幕宽一些的视窗去布局网页,通常是800到1000像素。为了将视窗上的布局映射到原始设备屏幕上,手机浏览器要么只渲染整个页面的一部分,要么将视窗缩放至原始屏幕大小。

因为缩放适配小屏幕而导致文字会变得很小,许多手机浏览器会使用文本溢出算法让文本变大而更易读。当一个包含文本的元素宽度用了100%,他的文本大小会增加直到达到一个易读的大小,但是不会修改布局。

text-size-adjust   这个属性允许开发者去除或者修改这个浏览器默认行为,因为当网页设计已经处理小屏幕的宽度问题时不需要他。

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.

初始值auto for smartphone browsers supporting inflation, none in other cases (and then not modifiable).
适用元素all elements
是否是继承属性yes
Percentagesyes, refer to the corresponding size of the text font
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序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

文档标签和贡献者

 此页面的贡献者: Kongwsh
 最后编辑者: Kongwsh,