這個問題在前端H5頁面開發可以說是一個老生常談的問題了。由於以前所有遇到的問題以及解決方法都會以文件的形式記錄在電腦裡，而非github或者blog,所以現在才一點一滴的整理上來，就當是一個心路歷程吧。

由於開發習慣，我現在使用HBuilder 這個前端IDE。除錯頁面會經常直接開啟工具欄中的chrome,然後開啟chrome devtool ,問題解決後，會直接把連結放到微信中，基於微信自帶的瀏覽器瀏覽。這時候就比較蛋疼了，每一次更改一個css，然後在微信瀏覽，由於微信自帶瀏覽器的機制問題，無法禁用快取，每一次必須更改一下style的版本號，來看移動端真機情況下的樣式。

由於UI調整，頁面展示文字大小需要修改，修改以後，發現字型大小並沒有改變，這就懵逼了。第一個想法就是瀏覽器快取問題，然後殺資料，清快取，改變版本，一通下來，小小期待的開啟瀏覽器再次瀏覽，瞬間黑線！！！，然並卵！重新整理幾次，繼續然並卵！既然與瀏覽器快取沒有關係，那就再想想其他方法。然後自然就是各種搜尋，終於有了新的發現。原來這個特性被稱做「Text Autosizer」，又稱「Font Boosting」、「Font Inflation」，是 Webkit 給移動端瀏覽器提供的一個特性：當我們在手機上瀏覽網頁時，很可能因為原始頁面寬度較大，在手機螢幕上縮小後就看不清其中的文字了。而 Font Boosting 特性在這時會自動將其中的文字字型變大，保證在即不需要左右滑動螢幕，也不需要雙擊放大螢幕內容的前提下，也可以讓人們方便的閱讀頁面中的文字，這應該就是webkit核心內部一個預設的機制問題。不過這個特性並不總是有必要的，還好在查到問題原因的同時，大家也討論了對這個問題的一些處理方案：

手動指定 viewport width=320，這時 Font Boosting 不會被觸發。（後邊可以知道，這個說法不嚴謹，在其他設定均為預設值時，這一條才有效）
Font Boosting 僅在未限定尺寸的文字流中有效，給元素指定寬高，就可以避免 Font Boosting 被觸發。

解決

• 方法一
  在出現Font Boosting情況的元素CSS加上max-height:99999px即可。
• 方法二
  給元素設定-webkit-text-size-adjust: none;。

顯然第 2 條方案是有缺陷的，文字內容不可能都指定寬高。不過還好，我們通過指定 max-height ,min-height, min-width, max-width（經 @Ovaldi 指正，只有 max-height 有效） 也是可以的。比如body * { max-height: 999999px; } 就可以無副作用的禁掉 Font Boosting 特性。當然，我覺得沒必要使用通用選擇器，用類似 p { max-height: 999999px; } 可能更好一些。
到這裡，我們已經明白問題所在，並且也有解決方案了。但是有一個問題仍然困擾著我：當字型大於某一個值時（比如當不指定viewport width，手機螢幕width=320，字型大於等於82px時），這個 Font Boosting 就始終不會被觸發。Chrome 是如何計算的，這其中的邏輯又是什麼？這有待考證。