1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
---
title: text-size-adjust
slug: Web/CSS/text-size-adjust
tags:
- CSS
- 参考
- 移动平台
translation_of: Web/CSS/text-size-adjust
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<p> <strong><code>text-size-adjust</code></strong> <a href="/zh-CN/docs/Web/API/CSS">CSS</a> 控制将一些手机或平板设备上使用的文本溢出算法（text inflation algorithm）。其他类型的设备上的浏览器会忽略此属性。</p>
<pre class="brush: css">/* 专有属性值 */
text-size-adjust: none;
text-size-adjust: auto;
/* <percentage> 值 */
text-size-adjust: 80%;
/* 全局属性值 */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: unset;
</pre>
<p>因为许多网站还没有适配屏幕较小的设备，移动设备的浏览器和桌面浏览器在渲染网页时可能会有不同。他们不是以设备屏幕宽度布局网页，而是用比屏幕宽一些的 {{glossary("viewport", "视窗")}} 去布局网页，通常是 800 到 1000 像素。为了将视窗上的布局映射到原始设备屏幕上，手机浏览器要么只渲染整个页面的一部分，要么将视窗缩放至原始屏幕大小。</p>
<p>因为缩放适配小屏幕而导致文字会变得很小，许多手机浏览器会使用文本溢出算法放大文本，改善可读性。当一个包含文本的元素使用了 100% 的屏幕宽度，该算法会增加文本大小，但是不会修改布局。<code>text-size-adjust</code> 这个属性允许开发者去除或者修改浏览器的这种行为，比如，当网页已经适配了小屏幕之后，就不需要这么做了。</p>
<div class="note"><strong>注意:</strong>
<ul>
<li>这个属性并不是标准。 你必须为每个你想要应用的浏览器加上属性前缀。</li>
<li>不同浏览器，这个属性有不同的行为和语法。更多的信息，请查看下面的浏览器兼容性部分。</li>
<li><strong>这个属性只在一些智能手机和平板电脑上使用。</strong>桌面浏览器和一些平板电脑浏览器并没有一些溢出算法。</li>
<li>如果 <code>-webkit-text-size-adjust</code> 显式设置为 <code>none</code>, 老的基于桌面的 WebKit 和平板电脑浏览器，像 Chrome≤26 或者 Safari≤5, 不会忽略这个属性, 反而会阻止用户在 web 界面放大或缩小。<a href="https://bugs.webkit.org/show_bug.cgi?id=56543">#</a></li>
<li>不是所有的浏览器都支持这个属性使用百分比值(例如 Webkit 和 Trident , 但是 Gecko不支持). 检查下面浏览器兼容的部分查看更多的信息。</li>
</ul>
</div>
<p>{{cssinfo}}</p>
<h2 id="语法">语法</h2>
<p><code>text-size-adjust</code> 属性的值为 <code><a href="#none">none</a></code>, <code><a href="#auto">auto</a></code>，或 <code><a href="#<percentage>"><percentage></a></code></p>
<h3 id="属性值">属性值</h3>
<dl>
<dt><code>none</code></dt>
<dd>禁用浏览器的文本溢出算法。</dd>
<dt><code>auto</code></dt>
<dd>启用浏览器的文本溢出算法。该值一般用于取消先前使用 CSS 设置的 <code>none</code>。</dd>
<dt><code><percentage>
</code></dt><dd><code>启用浏览器的文本溢出算法，并使用用一个百分数来确定文本放大程度。</code></dd><code>
</code></dl><code>
<h3 id="形式化语法">形式化语法</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}}</td>
<td>{{Spec2("CSS Text Size Adjust")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.properties.text-size-adjust")}}</p>
<p>[1] There is a bug in older WebKit-based desktop browsers. If <code>-webkit-text-size-adjust</code> is explicitly set to <code>none</code>, older Webkit-based desktop browsers, instead of ignoring the property, will prevent the user from zooming in or out of the web page. See <a href="https://bugs.webkit.org/show_bug.cgi?id=56543">Bug 56543</a> (affected Safari≤5 & Chrome≤26), <a href="https://code.google.com/p/chromium/issues/detail?id=163359">Bug 163359</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=84186">Bug 84186</a>.</p>
<p>[2] In addition to the <code>-moz-</code> prefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit-</code> prefixed version of the property for web compatibility reasons behind the <code>layout.css.prefixes.webkit</code> flag, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p>
<p>[3] If the viewport is set using {{HTMLElement("meta")}} element, the value of the CSS <code>text-size-adjust</code> property is ignored. See <a href="https://msdn.microsoft.com/library/windows/apps/ff462082(v=vs.105).aspx#BKMK_AdjustingTextSizewithCustomCSS">detailed implementation hints on MSDN</a>.</p>
<h2 id="参见">参见</h2>
<ul>
<li><a class="link-https" href="https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW16">Apple's documentation</a></li>
<li><a class="external" href="http://dbaron.org/log/20111126-font-inflation">Gecko's behavior description</a>, by L. David Baron</li>
<li><a class="external" href="https://msdn.microsoft.com/library/windows/apps/ff462082(v=vs.105).aspx#BKMK_AdjustingTextSizewithCustomCSS">Microsoft's documentation</a></li>
</ul></code>
|
