text-size-adjust
text-size-adjust CSS 属性控制某些智能手机和平板电脑上使用的文本膨胀算法。其他浏览器将忽略此属性。
由于许多网站并未针对小尺寸设备进行开发,因此移动浏览器在渲染网页的方式上与桌面浏览器有所不同。它们不以设备屏幕的宽度来布局页面,而是使用一个通常为 800 或 1000 像素的更宽的视口来布局页面。为了将超宽布局映射回原始设备尺寸,它们要么只显示整个渲染的一部分,要么缩小视口以适应。
由于缩小以适应移动屏幕的文本可能非常小,许多移动浏览器会应用文本膨胀算法来放大文本,使其更易于阅读。当包含文本的元素使用屏幕宽度的 100% 时,该算法会增大其文本大小,但不会修改布局。text-size-adjust 属性允许网页作者禁用或修改此行为,因为针对小屏幕设计的网页不需要它。
语法
css
/* 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: revert;
text-size-adjust: revert-layer;
text-size-adjust: unset;
text-size-adjust 属性指定为 none、auto 或 <percentage>。
值
none-
禁用浏览器的膨胀算法。
auto-
启用浏览器的膨胀算法。此值用于取消之前使用 CSS 设置的
none值。 <percentage>-
启用浏览器的膨胀算法,指定一个百分比值来增大字体大小。
正式定义
正式语法
text-size-adjust =
auto |
none |
<percentage [0,∞]>
示例
基本禁用用法
如上所述,在一个设计得当的响应式网站上,不需要 text-size-adjust 行为,因此开发者可以选择通过指定 none 值来关闭它
css
p {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
规范
| 规范 |
|---|
| CSS 移动文本大小调整模块级别 1 # 调整控制 |
浏览器兼容性
加载中…
另见
- Apple 的文档 (2016)
- Google Chrome 行为描述 (2014)
- L. David Baron (2011) 的Gecko 行为描述