webkit內核下，字號會自動放大的問題

webkit內核下，字號會自動放大的問題

blog
github

問題描述

有時候在作移動端頁面的時候，會發現某些字體會自動放大（而頁面中另外一部分倒是對的- -），放大的比例看上去還沒啥規律，非常詭異。

一探究竟

網上一通搜索，還真搜出來了。

首先，這個不是bug，是Chromium內核提升移動端文本可讀性的一個特性，叫作這個特性被稱作「Text Autosizer」，又稱「Font Boosting」、「Font Inflation」，具體能夠見這個文檔Chromium’s Text Autosizer，計算規則則能夠在這裏看到TextAutosizer.cpp,在文檔裏能夠看到計算公式以下

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;
}

變量解釋：

• originFontSize: 原始字體大小

• computedFontSize: 通過計算後的字體大小

• multiplier: 換算係數，值由如下幾個值計算獲得deviceScaleAdjustment:
  當指定 viewport width=device-width 時此值爲 1，不然值在 1.05 - 1.3 之間，有專門的計算規則

textScalingSlider: 瀏覽器中手動指定的縮放比例，默認爲 1
systemFontScale: 系統字體大小，Android設備能夠在「設備 - 顯示 - 字體大小」處設置，默認爲 1
clusterWidth: 應用 Font Boosting 特性字體所在元素的寬度（如何肯定這個元素請參考上邊兩個連接）
screenWidth: 設備屏幕分辨率（DIPs, Density-Independent Pixels），如 iPhone 5 爲 320

解決問題

其實嘛，解決起來仍是容易的~

給元素指定寬高

試了下給元素單獨設置width或height或max-height便可禁用Text Autosizer

使用-webkit-text-size-adjust

給元素設置 -webkit-text-size-adjust: none;可禁用Text Autosizer，這個屬性還能使得咱們在移動端使用小於12px的字體。此屬性在桌面版中無效。

參考資料

flexible.js字體大小詭異現象解析及解決方案

網頁字體縮放樣式-webkit-text-size-adjust的用法詳解

以上。

new game！