最近在谷歌浏览器调试移动端高清方案时,发现设置的字体大小竟然和实际显示的字体大小不一致?可以移动端 ua 打开此页面测试下方 demo。
fontSize => 设置字体大小;actualSize => 实际展示字体大小

li 的 fontSize:
fontSize: actualSize:

Demo 图

如果你是移动端打开此页面的话,可以看到 li 的 fontSize 明明是 22px,但是实际 chrome 内显示的却是 34px,这是为什么?

Text Autosizer

逛了一圈发现该属性为 Webkit 给移动端浏览器提供的特性(特性被称做「Text Autosizer」,又称「Font Boosting」、「Font Inflation」),可以看下 MDN 如何描述:

因为许多网站还没有适配屏幕较小的设备,移动设备的浏览器和桌面浏览器在渲染网页时可能会有不同。他们不是以设备屏幕宽度布局网页,而是用比屏幕宽一些的 视窗 去布局网页,通常是 800 到 1000 像素。为了将视窗上的布局映射到原始设备屏幕上,手机浏览器要么只渲染整个页面的一部分,要么将视窗缩放至原始屏幕大小。
因为缩放适配小屏幕而导致文字会变得很小,许多手机浏览器会使用文本溢出算法放大文本,改善可读性。当一个包含文本的元素使用了 100% 的屏幕宽度,该算法会增加文本大小,但是不会修改布局。text-size-adjust 这个属性允许开发者去除或者修改浏览器的这种行为,比如,当网页已经适配了小屏幕之后,就不需要这么做了。

初心是好的,这种不是预期内的特性总是会给开发人员带来麻烦。下面提供几个解决方案,可以根据实际情况选择。

解决方案

  • 【推荐】设置 text-size-adjust: none;,禁用掉该特性。可以在上述 demo 内,切换移动端 ua,点击 auto set text-size-adjust 按钮,查看效果(可来回切换)。因该属性为可继承(MDN)所以在上面设置一下就行了。

    body {
        text-size-adjust: none;
    }
  • 设置 initial-scale=1。当 initial-scale1 时,不会触发 Font Boosting,一般使用高清方案例如 remvw 等时会设置 initial-scale 为一个缩放值,一般推荐上面的方案

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 或 -->
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=1, minimum-scale=1">