一、概念

  这是webkit内核移动浏览器特性导致的,这个特性被称做Text Autosizer,又称Font BoostingFont 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">