问题:
做移动端页面,有时在谷歌f12调试时,字体会出现异常放大情况
如下图:
首先,这个不是bug,是Chromium内核提高移动端文本可读性的一个特性,叫做这个特性被称做「Text Autosizer」,又称「Font Boosting」、「Font Inflation」
方案:
1、给元素指定宽高
给元素单独设置width或height或max-height即可禁用Text Autosizer
2、使用-webkit-text-size-adjust
给元素设置 -webkit-text-size-adjust: none;可禁用Text Autosizer,这个属性还能使得我们在移动端使用小于12px的字体。此属性在桌面版中无效。
*{
-webkit-text-size-adjust: none;
}