前段時間回頭去寫純靜態Html頁面，涉及到手機端匹配的時候，遇到了特別棘手的問題

如圖，設定font-size是14px，可是Chrome實際渲染是42px。但是同頁面另外同樣的標籤卻沒有任何問題

所有的CSS樣式都刪除依然無法生效，在想是不是動態設定了viewport的問題？

問題依然無法解決，直至偶然看到一篇文章：Font Boosting 才算是徹底解決了這個問題

簡單來說這也是webkit挖的一個坑，這個特性被稱為「Text Autosizer」，最初的目的是希望手機端訪問網頁，因為寬度過大而看不清字型提出的一種解決方案。這個方案就是將字型適度的增大，保證既可以不縮放頁面，也能看清文字資訊

特性很好，但是一旦所有的元素都得按照設計稿一點點敲定的時候，這個特性就變得十分噁心了

解決方案和原理在引入的這篇文章裡面也有詳細的解釋，再複述一次吧：

1.用viewport的width手動指定寬度，但是對我的頁面沒什麼效果

2.給body設定max-width等於99999px（這是唯一有效的屬性，max-height是無效的）

3.單獨給搞事的那段標籤設定max-width，這樣問題就不會出現了

 原理就是TextAutosizer.cpp這個檔案對originFontSize原始字型大小進行了再計算，乘以了multiplier換算係數

如果viewport中width=device-width，那麼係數就是1。同時Android系統下systemFontScale的設定值也會影響到係數