这是
实验性技术
检查
浏览器兼容性表格
要小心谨慎在生产中使用这之前。
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: 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.
text-size-adjust
property is specified as
none
,
auto
，或
<percentage>
.
none
Disables the browser's inflation algorithm.
auto
none
value previously set with CSS.
<percentage>
Enables the browser's inflation algorithm, specifying a percentage value with which to increase the font size.
| 初始值 |
auto
for smartphone browsers supporting inflation,
none
in other cases (and then not modifiable).
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | yes |
| 百分比 | yes, refer to the corresponding size of the text font |
| 计算值 | 如指定 |
| 动画类型 | discrete |
none | auto | <percentage>
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 vlaue of none:
p {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Mobile Text Size Adjustment Module Level 1
The definition of 'text-size-adjust' in that specification. |
编者草案 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-size-adjust
Experimental
|
Chrome
完整支持
54
|
Edge
完整支持
79
|
Firefox 不支持 No | IE 不支持 No | Opera 完整支持 41 |
Safari
不支持
No
|
WebView Android 完整支持 54 | Chrome Android 完整支持 54 |
Firefox Android
完整支持
49
Prefixed
|
Opera Android 完整支持 41 |
Safari iOS
完整支持
1
Prefixed
|
Samsung Internet Android 完整支持 6.0 |
<percentage>
Experimental
|
Chrome 完整支持 54 | Edge 完整支持 12 | Firefox 不支持 No | IE 不支持 No | Opera 完整支持 41 | Safari 不支持 No | WebView Android 完整支持 54 | Chrome Android 完整支持 54 | Firefox Android 不支持 No | Opera Android 完整支持 41 | Safari iOS 不支持 No | Samsung Internet Android 完整支持 6.0 |
完整支持
不支持
实验。期望将来行为有所改变。
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。