移动端字体显示大小和css设置大小的不一致解决方案

这几天在做移动端页面，研究了一下手淘的 flexible.js 并在自己项目中试行了一下，然后发现了一个纠结无比的问题，即：css里设置了字体大小，但是显示却非常诡异，用 “诡异” 来形容是因为这个问题在定位的时候真的无迹可寻。

后来接触到了一个概念，终于了解了问题的本来面目。这个概念叫做 “Font Boosting”（文字爆炸）。

当 viewport 的 initial-scale 为 1时，不会涉及这个问题。

而 flexible.js 会依据 window.devicePixelRatio 值来对页面进行缩放 这时候，webkit 内核在移动端浏览器提供的 “Font Boosting” 属性开始起作用了，它会对字体进行放大，以便让人们方便的查看文本。

其计算规则如下：