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

出现问题

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

探查原因

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

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

而 flexible.js 会依据 window.devicePixelRatio 值来对页面进行缩放

这时候，webkit 内核在移动端浏览器提供的 “Font Boosting” 属性开始起作用了，它会对字体进行放大，以便让人们方便的查看文本。

其计算规则如下：

multiplier = Math.max(1, deviceScaleAdjustment * textScalingSlider * systemFontScale * clusterWidth / screenWidth);
if (originFontSize < 16) {
    computedFontSize = originFontSize * multiplier;
}
else if (16 <= originFontSize <= (32 * multiplier - 16)) {
    computedFontSize = (originFontSize / 2) + (16 * multiplier - 8);
}
else if (originFontSize > (32 * multiplier - 16)) {
    computedFontSize = originFontSize;
}

• originFontSize: 原始字体大小
• computedFontSize: 经过计算后的字体大小
• multiplier: 换算系数
• deviceScaleAdjustment: 变量（1.05 - 1.3），有专门的计算规则，当指定 viewport 的 width=device-width 时此值为 1
• textScalingSlider: 浏览器中手动指定的缩放比例，默认为 1
• systemFontScale: 系统字体大小，Android设备可以在「设备 - 显示 - 字体大小」处设置，默认为 1
• clusterWidth: 应用 Font Boosting 特性字体所在元素的宽度
• screenWidth: 设备屏幕分辨率（DIPs, Density-Independent Pixels），如 iPhone 5 为 320

问题解决

下面两个样式选择一个就可以解决问题

p{max-height: 100%} //给元素加一个高度
p{-webkit-text-size-adjust: none;} //禁用Webkit内核浏览器的文字大小调整功能

根源在于

• Font Boosting 仅在未限定尺寸的文本流中有效，所以给元素指定高度，就可以避免 Font Boosting 被触发。但是文本流一般都是不固定高度的，所以我们可以一个最大高度。
• 直接禁用调整文字大小的功能，我们都知道浏览器最小字体是12px，你给一个元素加上 ‘font-size: 10px;’，其大小已然按照 12px 来显示，那么我们就想让字体为 10px，就可以使用 ‘-webkit-text-size-adjust’ 属性，但是建议大家不要轻易使用。