移动端开发网页时，有部分字体无端变大或变小

今天发现手机端，字体大小会随着容器的宽度变化而变化，着很奇怪，加了统一的字体大小样式都不行，因而查了一下：

首先，这个准确说不是由开发人员致使的bug,这是webkit内核移动浏览器特性致使的，这个特性被称作「Text Autosizer」，又称「Font Boosting」、「Font Inflation」，是 Webkit 给移动端浏览器提供的一个特性：当咱们在手机上浏览网页时，极可能由于原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大，保证在即不须要左右滑动屏幕，也不须要双击放大屏幕内容的前提下，也能够让人们方便的阅读页面中的文本。

解决方法

1.元素单独设置width或height或max-height；
max-height：100%;，由于内容显示通常不会固定高和宽。

2.给元素设置 -webkit-text-size-adjust: none;
可禁用Text Autosizer，这个属性还能使得咱们在移动端使用小于12px的字体。此属性在桌面版中无效。

参考网址：https://www.jianshu.com/p/b62e081fd53f