Android 手機上的 Chrome 會隨機放大 font-size？

今天碰上一個 bug，花了整天都無法解決

問題描述如下：我的整個網站的所有頁面基本字體大小應該是 16px

桌面 chrome 打開沒問題 toggle device toolbar 去看也沒錯

手機上用 Firefox 打開也是 16px 沒錯偏偏手機 Chrome 打開會變成 1.15 倍大小

就算手機連到電腦用 remote device 功能觀察也只顯示 font-size 成了 1.15 倍

但無法在 developer tool 中 trace 到任何理由

最奇怪的是並非每個頁面都會自動放大 1.15 倍而是跟畫面上的字數有關

字數越多越有可能被調整

算是一個超級悲慘的地雷不管怎麼調怎麼改 css，都無法變成我要的 font-size

font-size 怎麼會跟字數多寡有關係？

最後找到一篇文章

https://www.quirksmode.org/blog/archives/2015/09/a_note_on_weird.html

發現有所謂的 Chromium’s Text Autosizer 存在

https://docs.google.com/document/d/1PPcEwAhXJJ1TQShor29KWB17KJJq7UJOM34oHwYP3Zg/edit?pli=1#heading=h.si6prvoucj2z

最後居然是有這種機制在背後運作而 developer tool 中也沒有任何提示

浪費一整天 debug 特此紀錄希望減少之後的人的損失

google chrome android css

分享共 4,938 次點閱

按了喜歡：

共有 1 則留言

尤川豪 · 6年前

445 貼文 · 275 留言

一句話再次提醒：

Android 上的 Chrome 在某些情況下會不理你的 css，自動幫你放大字體！

頁面上字數多的話，會自動放大字體！

踩到這個雷很慘，因為根本無法 debug

https://judes.me/frontend/2018/06/17/font-boosting.html

https://juejin.im/entry/578713ea7db2a2005ccfa769

https://github.com/ccchangkong/article/issues/20

字體自動放大公式如下：

multiplier = Math.max(1, deviceScaleAdjustment * textScalingSlider * systemFontScale * clusterWidth / screenWidth);
if (originFontSize < 16) {
    computedFontSize = originFontSize * multiplier;
}
else if (16 <= originFontSize <= (32 * multiplier - 16)) {
    computedFontSize = (originFontSize / 2) + (16 * multiplier - 8);
}
else if (originFontSize > (32 * multiplier - 16)) {
    computedFontSize = originFontSize;
}

請 google 以下關鍵字

Chromium’s Text Autosizer

font boosting chrome android

心得：花了一整天研究自己的 css 要 debug，最後發現這居然是 Chrome 在 Android 上的 feature...

按了喜歡：

您的留言

登入之後發表留言

尤川豪

445 貼文 · 275 留言

Devs.tw 是讓工程師寫筆記、網誌的平台。隨手紀錄、寫作，方便日後搜尋！

歡迎您一起加入寫作與分享的行列！

查看所有文章