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

YancyYe 發布于2019-08-29 11:26 / 2761人閱讀

摘要：內核下，字號會自動放大的問題問題描述有時候在做移動端頁面的時候，會發現某些字體會自動放大而頁面中另一部分卻是對的，放大的比例看上去還沒啥規律，很是詭異。

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！

GPU云服務器云服務器彈性伸縮的ECS會自動釋放嗎內核問題 linux 內核編譯問題騰訊云服務器會自動重啟

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111644.html

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

摘要：內核下，字號會自動放大的問題問題描述有時候在做移動端頁面的時候，會發現某些字體會自動放大而頁面中另一部分卻是對的，放大的比例看上去還沒啥規律，很是詭異。 webkit內核下，字號會自動放大的問題 bloggithub 問題描述有時候在做移動端頁面的時候，會發現某些字體會自動放大（而頁面中另一部分卻是對的- -），放大的比例看上去還沒啥規律，很是詭異。 showImg(https://...

CoXie 2019-08-01 15:51 評論0 收藏0
關于響應式布局，你必須要知道的

摘要：本文主要介紹一些響應式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設置字號，還可以設置任何盒模型的屬性，比如有一點優勢就是可以和媒體查詢配合，實現響應式布局運用場景如果我們做的頁面只在移動端訪問，這是因為不兼容低版本的瀏覽器。一、前言響應式Web設計可以讓一個網站同時適配多種設備和多個屏幕，可以讓網站的布局和功能隨用戶的使用環境（屏幕大小、輸入方式、設備/瀏覽器能力）而變化。...

Eirunye 2019-08-02 11:56 評論0 收藏1
關于響應式布局，你必須要知道的

摘要：本文主要介紹一些響應式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設置字號，還可以設置任何盒模型的屬性，比如有一點優勢就是可以和媒體查詢配合，實現響應式布局運用場景如果我們做的頁面只在移動端訪問，這是因為不兼容低版本的瀏覽器。一、前言響應式Web設計可以讓一個網站同時適配多種設備和多個屏幕，可以讓網站的布局和功能隨用戶的使用環境（屏幕大小、輸入方式、設備/瀏覽器能力）而變化。...

nevermind 2019-08-29 17:11 評論0 收藏0
關于響應式布局，你必須要知道的

摘要：本文主要介紹一些響應式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設置字號，還可以設置任何盒模型的屬性，比如有一點優勢就是可以和媒體查詢配合，實現響應式布局運用場景如果我們做的頁面只在移動端訪問，這是因為不兼容低版本的瀏覽器。一、前言響應式Web設計可以讓一個網站同時適配多種設備和多個屏幕，可以讓網站的布局和功能隨用戶的使用環境（屏幕大小、輸入方式、設備/瀏覽器能力）而變化。...

amuqiao 2019-08-23 12:45 評論0 收藏0