移動端動態設定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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/252692.html
標籤：其他
下一篇：JavaScript-快速入門