一、概念

　　這是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">