可恶的css3字体缩放样式text-size-adjust

不减20斤不改头像
265 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

CSS属性控制在某些智能手机和平板电脑上使用的文本膨胀算法。其他浏览器将忽略此属性。text-size-adjust

在ios系统下会有放大字体的效果。安卓手机我试过的都是正常的，不能确定全都正常。 测试了一下，最小复现代码如下

<body>
 我是文字
  <div style="width: 800px;">
    我会膨胀
  </div>
  <div style="width: 800px;">
    我会膨胀
  </div>

  之外的hello world

</body>

image.png


<body>
 我是文字
  <div style="width: 600px;">
    我会膨胀
  </div>
  <div style="width: 600px;">
    我会膨胀
  </div>

  之外的hello world

</body>

image.png 大概是需要宽度大于560px,宽度和缩放比例成正比，但是有上限。下面的比上面的小一点，但是这些不是重点，这个应该是一个bug吧，没有什么规律可循，不同浏览器有不同实现。所以不用这个属性就行了，没什么深入研究的价值

text-size-adjust 是什么

引用 MDN 上对 text-size-adjust 的解释：

text-size-adjust 属性 允许我们控制将文本溢出算法应用到一些手机设备上。这个属性还没有写进标准，使用时必须加上前缀：-moz-text-size-adjust，-webkit-text-size-adjust,，和 -ms-text-size-adjust。 因为缩放适配小屏幕而导致文字会变得很小，许多手机浏览器会使用文本溢出算法让文本变大而更易读。当一个包含文本的元素宽度用了 100%，他的文本大小会增加直到达到一个易读的大小，但是不会修改布局。

text-size-adjust CSS 控制将一些手机或平板设备上使用的文本溢出算法（text inflation algorithm）。其他类型的设备上的浏览器会忽略此属性。

/* 专有属性值 */
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;

因为很久以前许多网站还没有适配屏幕较小的设备，移动设备的浏览器和桌面浏览器在渲染网页时可能会有不同。他们不是以设备屏幕宽度布局网页，而是用比屏幕宽一些的 视窗 去布局网页，通常是 800 到 1000 像素。为了将视窗上的布局映射到原始设备屏幕上，手机浏览器要么只渲染整个页面的一部分，要么将视窗缩放至原始屏幕大小。

如今来看，大多数网站已经适配了移动端，所以浏览器这个看似人性化的优化，反而成了副作用。

Basic disabling usage

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 value of none: 这个问题，开始时我是想的缩小到10px,然后我看ios上是和正常文字大小一致，安卓上应该就我发正常读了，同事看了字体大小正常，显示不正常，觉得事情不是这么简单，随手goole了一下，就搜出了正解，因为，遇到问题还是要讲道理，不能胡乱猜测。要有理有据，最终才能高效解决问题，否则，只会让事情变得更加糟糕。

avatar
文章
阅读
粉丝