移動端開發網頁時，有部分字體無端變大或變小

今天發現手機端，字體大小會隨着容器的寬度變化而變化，着很奇怪，加了統一的字體大小樣式都不行，因而查了一下：

首先，這個準確說不是由開發人員致使的bug,這是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的字體。此屬性在桌面版中無效。

參考網址：https://www.jianshu.com/p/b62e081fd53f