移动端的HTML删除两个字，字体大小却发生跳跃式变化，原因？

Question

移动端，一段文字（下图暗黄色底色那一段），多两个字(下图1），字体大小就会变成偏大的48.712px，少两个字（下图2），就变为CSS定义的24px，而CSS没有发生任何变化，也没有外挂任何js。

我测试了一上午，真机上QQ浏览器和小米原生浏览器也有这个现象。但真机的微信浏览器又是正常的（按CSS定义来的）。

请问发生了什么？我特别想知道chrome调试面板中的css/computed中的48.712px是怎么来的，我明明在CSS中定义的是24px。问题的关键应该就在这。

Answer 1

F12给DOM打个断点，看下是初始就这么大的字体还是中途被改过

Answer 2

从目前获取的信息来猜：

1. 没有对html文件进行样式初始化；
2. 父级样式继承，设置暗黄色文字部分的父级字体样式：font-size:0；即可解决；

最后一点点建议，你想表达的和别人看到的问题描述是不一样的，所以->【下次记得贴代码~】😩

Answer 3

看下meta标签，有可能是viewport没有设置

Answer 4

这个特性被称做「Text Autosizer」，又称「Font Boosting」、「Font Inflation」，是 Webkit 给移动端浏览器提供的一个特性：当我们在手机上浏览网页时，很可能因为原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大，保证在即不需要左右滑动屏幕，也不需要双击放大屏幕内容的前提下，也可以让人们方便的阅读页面中的文本。

给元素设置 max-height: 999999px; 或者 -webkit-text-size-adjust: none; 就正常了

参考链接：
https://github.com/amfe/artic...
https://stackoverflow.com/que...

Answer 5

字体膨胀概念吧?

-webkit-text-size-adjust 你查一下这个属性