尤 川豪   ·  3月前
Exp. 1,209  ·  152 貼文  ·  114 留言

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 特此紀錄 希望減少之後的人的損失

  分享   共 333 次點閱
共有 1 則留言
尤 川豪   ·  3月前
Exp. 1,209  ·  152 貼文  ·  114 留言

一句話再次提醒:

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...

 
您的留言
尤 川豪
Exp. 1,209  ·  152 貼文  ·  114 留言

關於作者

Devs.tw 作者,喜歡分享&建造新東西的工程師。

技術部落格:轉個彎日誌

歡迎在 Facebook 追蹤我!

不定期分享有趣技術文章!