移动端动态设置viewport引起的大段文字字号变大

移动端动态设置viewport引起的大段文字字号变大

移动端动态设置viewport引起的大段文字字号变大的原因并不是什么bug，而是 Webkit 给移动端浏览器提供的一个特性：当我们在手机上浏览网页时，很可能因为原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。这个特性叫Font Boosting（字体提升），也被称为Text Autosizer，Font Inflation。而 Font Boosting 特性在这时会自动将其中的文字字体变大，保证在即不需要左右滑动屏幕，也不需要双击放大屏幕内容的前提下，也可以让人们方便的阅读页面中的文本。

出现该特性的原因是因为：

• 在移动端页面缩放情况下(initial-scale!=1)，chrome有可能重新调整字号；

• 未限定尺寸的文本流中有效

解决方案

• Font Boosting 仅在未限定尺寸的文本流中有效，给元素指定宽高，就可以避免 Font Boosting 被触发

• 可通过指定max-height来避免触发。比如 .class {max-height:99999px;}

• .class{ -webkit-text-size-adjust:none;}

• 指定initial-scale = 1