一、概念

　　这是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的字体。此属性在桌面版中无效。

text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;

3、webkit 中应该有判断如果initial-scale=1时，不触发Text Autosizer

  • 浏览器的目的是为了放大，而设置屏幕不能放大，自然Text Autosizer就失去的意义。
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 或 -->
<meta name ="viewport" content ="initial-scale=1, maximum-scale=1, minimum-scale=1">