webkit内核下,字体大小会自动变大不过是吧--),放大后的比例好像不太规律,很诡异。在网上一搜,果然找到了。首先,这不是错误。提高移动端文本的可读性是Chromium内核的一个特性。此功能称为“TextAutosizer”,也称为“FontBoosting”和“FontInflation”。具体可以看这个文档Chromium的TextAutosizer,计算规则可以看这里TextAutosizer.cpp,在文档中可以看到计算公式如下multiplier=Math.max(1,deviceScaleAdjustment*textScalingSlider*systemFontScale*clusterWidth/screenWidth);if(originFontSize<16){computedFontSize=originFontSize*multiplier;}elseif(16<=originFontSize<=(32*multiplier-16)){computedFontSize=(originFontSize/2)+(16*multiplier-8);}elseif(originFontSize>(32*multiplier-16)){computedFontSize=originFontSize;}变量解释:originFontSize:原始字体大小computedFontSize:计算字体大小multiplier:换算系数,该值由以下值计算得出deviceScaleAdjustment:当视口width=device-width指定这个值为1,否则该值在1.05-1.3之间,有特殊的计算规则应用FontBoosting特性字体的元素(如何确定该元素,请参考上面两个链接)screenWidth:设备屏幕分辨率(DIPs,Density-IndependentPixels),比如iPhone5解决了320的问题。其实很容易解决~指定元素的width和height,尝试单独设置元素的widthorheightormax-height来禁用TextAutosizer使用-webkit-Text-size-adjust设置-webkit-text-size-adjust:none用于元素;可以禁用文本自动调整器。该属性还允许我们在移动端使用小于12px的字体。此属性在桌面版本中无效。参考资料flexible.js字体大小奇怪现象分析及解决方法网页字体缩放style-webkit-text-size-adjust用法详见上文。新游戏!
