移動端動態設置viewport引起的大段文字字號變大
移動端動態設置viewport引起的大段文字字號變大的原因並不是什麼bug，而是 Webkit 給移動端瀏覽器提供的一個特性：當我們在手機上瀏覽網頁時，很可能因爲原始頁面寬度較大，在手機屏幕上縮小後就看不清其中的文字了。這個特性叫Font Boosting（字體提升），也被稱爲Text Autosizer，Font Inflation。而 Font Boosting 特性在這時會自動將其中的文字字體變大，保證在即不需要左右滑動屏幕，也不需要雙擊放大屏幕內容的前提下，也可以讓人們方便的閱讀頁面中的文本。
出現該特性的原因是因爲：
-
在移動端頁面縮放情況下(initial-scale!=1)，chrome有可能重新調整字號；
-
未限定尺寸的文本流中有效
解決方案
-
Font Boosting 僅在未限定尺寸的文本流中有效，給元素指定寬高，就可以避免 Font Boosting 被觸發
-
可通過指定max-height來避免觸發。比如 .class {max-height:99999px;}
-
.class{ -webkit-text-size-adjust:none;}
-
指定initial-scale = 1