移动端 Chrome 下匪夷所思的 Font Boosting 效应

近日在开发一个移动端单页应用的时候,发现字体大小出现了离奇的 BUG。

同一个 article 下面,里面的字体居然大了好几倍,而且完全失去控制。这种问题在 Chrome 和 Firefox 的移动版下会发生,包括 PC 端的手机模拟器。

问题主要在于,为了缩小边框,我使用了 initial-scale 来对物理像素和逻辑像素实施了反变换。

<meta id="viewport" name="viewport"
      content="width=device-width,initial-scale=0.33333333,maximum-scale=0.33333333,user-scalable=no" />

如果 initial-scale 设置为 1,则文字大小就不会出现这种问题,但是样式很受影响。

无奈之下,在 SO 问了个问题,才知道这是一个著名的坑,叫做 Font Boosting。按照这个查找就会找到很多结果。

http://stackoverflow.com/q/32935033/2544762

这里一个评论点出了问题所在,答案在这个问题中得到解答:

http://stackoverflow.com/q/11289166/2544762

原因在于 Chrome 在移动端为了优化体验,对于一些满足特殊条件,让 Chrome 认为字太小的时候,会让字体变大,以适应移动端显示。

简而言之就是这样。

解决方法,需要对需要取消 Boosting 的元素指定高度,实际操作中,指定 max-height 就是最好人畜无害的解法:

html * {
    max-height: 99999999px;
}

这样即可关闭任何的 Font Boosting 效应。


【转载请附】愿以此功德,回向 >>

原文链接:https://www.huangwenchao.com.cn/2015/10/font-boosting.html【移动端 Chrome 下匪夷所思的 Font Boosting 效应】

《移动端 Chrome 下匪夷所思的 Font Boosting 效应》有1个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注