1. 程式人生 > >H5 手機頁面字型顯示大小與css設定不一致,viewport影響font-size問題

H5 手機頁面字型顯示大小與css設定不一致,viewport影響font-size問題

css設定字型大小後在手機端檢視字型偏大。經過排查排除css優先順序和js的問題。

經過分析可能是瀏覽器的功能,經過搜尋發現確實如此。

這個特性被稱做「Text Autosizer」,又稱「Font Boosting」、「Font Inflation」,是 Webkit 給移動端瀏覽器提供的一個特性:這個特性是為使用者因頁面內容多而縮放頁面導致字型變小看不清楚而設計的。目的是為了讓使用者縮放頁面後保證在即不需要左右滑動螢幕,也不需要雙擊放大螢幕內容的前提下,也可以讓人們方便的閱讀頁面中的文字。

但是在某些場景下我們不需要這個特性,如何限制這個特性達到我們想要的結果呢?

1:Font Boosting 僅在未限定尺寸的文字流中有效,給元素指定寬高,就可以避免 Font Boosting 被觸發。


2:給元素設定max-height,body * { max-height: 999999px; }可以很好的解決問題