成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webkit內(nèi)核下，字號(hào)會(huì)自動(dòng)放大的問題

YancyYe / 2771人閱讀

摘要：內(nèi)核下，字號(hào)會(huì)自動(dòng)放大的問題問題描述有時(shí)候在做移動(dòng)端頁面的時(shí)候，會(huì)發(fā)現(xiàn)某些字體會(huì)自動(dòng)放大而頁面中另一部分卻是對的，放大的比例看上去還沒啥規(guī)律，很是詭異。

webkit內(nèi)核下，字號(hào)會(huì)自動(dòng)放大的問題

blog
github

問題描述

有時(shí)候在做移動(dòng)端頁面的時(shí)候，會(huì)發(fā)現(xiàn)某些字體會(huì)自動(dòng)放大（而頁面中另一部分卻是對的- -），放大的比例看上去還沒啥規(guī)律，很是詭異。

一探究竟

網(wǎng)上一通搜索，還真搜出來了。

首先，這個(gè)不是bug，是Chromium內(nèi)核提高移動(dòng)端文本可讀性的一個(gè)特性，叫做這個(gè)特性被稱做「Text Autosizer」，又稱「Font Boosting」、「Font Inflation」，具體可以見這個(gè)文檔Chromium’s Text Autosizer，計(jì)算規(guī)則則可以在這里看到TextAutosizer.cpp,在文檔里可以看到計(jì)算公式如下

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: 經(jīng)過計(jì)算后的字體大小

multiplier: 換算系數(shù)，值由以下幾個(gè)值計(jì)算得到deviceScaleAdjustment:
當(dāng)指定?viewport width=device-width?時(shí)此值為 1，否則值在 1.05 - 1.3 之間，有專門的計(jì)算規(guī)則

textScalingSlider: 瀏覽器中手動(dòng)指定的縮放比例，默認(rèn)為 1
systemFontScale: 系統(tǒng)字體大小，Android設(shè)備可以在「設(shè)備 - 顯示 - 字體大小」處設(shè)置，默認(rèn)為 1
clusterWidth: 應(yīng)用 Font Boosting 特性字體所在元素的寬度（如何確定這個(gè)元素請參考上邊兩個(gè)鏈接）
screenWidth: 設(shè)備屏幕分辨率（DIPs, Density-Independent Pixels），如 iPhone 5 為 320

解決問題

其實(shí)嘛，解決起來還是容易的~

給元素指定寬高

試了下給元素多帶帶設(shè)置width或height或max-height即可禁用Text Autosizer

使用-webkit-text-size-adjust

給元素設(shè)置 -webkit-text-size-adjust: none;可禁用Text Autosizer，這個(gè)屬性還能使得我們在移動(dòng)端使用小于12px的字體。此屬性在桌面版中無效。

參考資料

flexible.js字體大小詭異現(xiàn)象解析及解決方案

網(wǎng)頁字體縮放樣式-webkit-text-size-adjust的用法詳解

以上。

new game！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111644.html

相關(guān)文章

  • webkit內(nèi)核下，字號(hào)會(huì)自動(dòng)放大的問題

    摘要：內(nèi)核下，字號(hào)會(huì)自動(dòng)放大的問題問題描述有時(shí)候在做移動(dòng)端頁面的時(shí)候，會(huì)發(fā)現(xiàn)某些字體會(huì)自動(dòng)放大而頁面中另一部分卻是對的，放大的比例看上去還沒啥規(guī)律，很是詭異。 webkit內(nèi)核下，字號(hào)會(huì)自動(dòng)放大的問題 bloggithub 問題描述 有時(shí)候在做移動(dòng)端頁面的時(shí)候，會(huì)發(fā)現(xiàn)某些字體會(huì)自動(dòng)放大（而頁面中另一部分卻是對的- -），放大的比例看上去還沒啥規(guī)律，很是詭異。 showImg(https://...

    CoXie 評論0 收藏0

  • 關(guān)于響應(yīng)式布局，你必須要知道的

    摘要：本文主要介紹一些響應(yīng)式布局容易忽略但又很重要的知識(shí)點(diǎn)。單位不僅僅可以用來設(shè)置字號(hào)，還可以設(shè)置任何盒模型的屬性，比如有一點(diǎn)優(yōu)勢就是可以和媒體查詢配合，實(shí)現(xiàn)響應(yīng)式布局運(yùn)用場景如果我們做的頁面只在移動(dòng)端訪問，這是因?yàn)椴患嫒莸桶姹镜臑g覽器。 一、前言 響應(yīng)式Web設(shè)計(jì)可以讓一個(gè)網(wǎng)站同時(shí)適配多種設(shè)備和多個(gè)屏幕，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小、輸入方式、設(shè)備/瀏覽器能力）而變化。...

    Eirunye 評論0 收藏1

  • 關(guān)于響應(yīng)式布局，你必須要知道的

    摘要：本文主要介紹一些響應(yīng)式布局容易忽略但又很重要的知識(shí)點(diǎn)。單位不僅僅可以用來設(shè)置字號(hào)，還可以設(shè)置任何盒模型的屬性，比如有一點(diǎn)優(yōu)勢就是可以和媒體查詢配合，實(shí)現(xiàn)響應(yīng)式布局運(yùn)用場景如果我們做的頁面只在移動(dòng)端訪問，這是因?yàn)椴患嫒莸桶姹镜臑g覽器。 一、前言 響應(yīng)式Web設(shè)計(jì)可以讓一個(gè)網(wǎng)站同時(shí)適配多種設(shè)備和多個(gè)屏幕，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小、輸入方式、設(shè)備/瀏覽器能力）而變化。...

    nevermind 評論0 收藏0

  • 關(guān)于響應(yīng)式布局，你必須要知道的

    摘要：本文主要介紹一些響應(yīng)式布局容易忽略但又很重要的知識(shí)點(diǎn)。單位不僅僅可以用來設(shè)置字號(hào)，還可以設(shè)置任何盒模型的屬性，比如有一點(diǎn)優(yōu)勢就是可以和媒體查詢配合，實(shí)現(xiàn)響應(yīng)式布局運(yùn)用場景如果我們做的頁面只在移動(dòng)端訪問，這是因?yàn)椴患嫒莸桶姹镜臑g覽器。 一、前言 響應(yīng)式Web設(shè)計(jì)可以讓一個(gè)網(wǎng)站同時(shí)適配多種設(shè)備和多個(gè)屏幕，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小、輸入方式、設(shè)備/瀏覽器能力）而變化。...

    amuqiao 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<