手機端頁面時，字體的顯示大小與在CSS中指定的大小不一致

最近在做一個手機端頁面時，遇到了一個奇怪的問題：字體的顯示大小，與在CSS中指定的大小不一致。大家可以查看這個Demo（記得打開Chrome DevTools）。


就如上圖所示，你可以發現，原本指定的字體大小是24px，但是最終計算出來的卻是53px，看到這詭異的結果，我心中暗罵一句：這什麼鬼！


隨後開始對問題各種排查：某個標籤引起的？某個CSS引起的？又或者是某句JS代碼引起的。通過一坨坨的刪代碼，發現貌似都不是。我不禁又罵，到底什麼鬼！不過中間還是發現了一些端倪：當頁面中的標籤數量或者文本數量大於某一個值，或者當CSS定義的字體大小落在某個區間時，這個問題纔會被觸發。而且字體變大後的值也隨着原始定義的字體大小而改變。


然後自然就是各種搜索，終於有了新的發現。原來這個特性被稱做「Text Autosizer」，又稱「Font Boosting」、「Font Inflation」，是 Webkit 給移動端瀏覽器提供的一個特性：當我們在手機上瀏覽網頁時，很可能因爲原始頁面寬度較大，在手機屏幕上縮小後就看不清其中的文字了。而 Font Boosting 特性在這時會自動將其中的文字字體變大，保證在即不需要左右滑動屏幕，也不需要雙擊放大屏幕內容的前提下，也可以讓人們方便的閱讀頁面中的文本。


不過這個特性並不總是有必要的，還好在查到問題原因的同時，大家也討論了對這個問題的一些處理方案：


手動指定 viewport width=320，這時 Font Boosting 不會被觸發。（後邊可以知道，這個說法不嚴謹，在其他設置均爲默認值時，這一條纔有效）
Font Boosting 僅在未限定尺寸的文本流中有效，給元素指定寬高，就可以避免 Font Boosting 被觸發。
顯然第 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 是如何計算的，這其中的邏輯又是什麼？



轉載自：http://www.cnblogs.com/javaScriptYang/p/5667547.html