摘要：内核下，字号会自动放大的问题问题描述有时候在做移动端页面的时候，会发现某些字体会自动放大而页面中另一部分却是对的，放大的比例看上去还没啥规律，很是诡异。
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！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/50157.html
摘要：内核下，字号会自动放大的问题问题描述有时候在做移动端页面的时候，会发现某些字体会自动放大而页面中另一部分却是对的，放大的比例看上去还没啥规律，很是诡异。 webkit内核下，字号会自动放大的问题 bloggithub 问题描述 有时候在做移动端页面的时候，会发现某些字体会自动放大（而页面中另一部分却是对的- -），放大的比例看上去还没啥规律，很是诡异。 showImg(https://...
摘要：本文主要介绍一些响应式布局容易忽略但又很重要的知识点。单位不仅仅可以用来设置字号，还可以设置任何盒模型的属性，比如有一点优势就是可以和媒体查询配合，实现响应式布局运用场景如果我们做的页面只在移动端访问，这是因为不兼容低版本的浏览器。 一、前言 响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。...
摘要：本文主要介绍一些响应式布局容易忽略但又很重要的知识点。单位不仅仅可以用来设置字号，还可以设置任何盒模型的属性，比如有一点优势就是可以和媒体查询配合，实现响应式布局运用场景如果我们做的页面只在移动端访问，这是因为不兼容低版本的浏览器。 一、前言 响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。...
摘要：本文主要介绍一些响应式布局容易忽略但又很重要的知识点。单位不仅仅可以用来设置字号，还可以设置任何盒模型的属性，比如有一点优势就是可以和媒体查询配合，实现响应式布局运用场景如果我们做的页面只在移动端访问，这是因为不兼容低版本的浏览器。 一、前言 响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。...
摘要：本文主要介绍一些响应式布局容易忽略但又很重要的知识点。单位不仅仅可以用来设置字号，还可以设置任何盒模型的属性，比如有一点优势就是可以和媒体查询配合，实现响应式布局运用场景如果我们做的页面只在移动端访问，这是因为不兼容低版本的浏览器。 一、前言 响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。...
阅读 1255·2021-10-14 09:43
阅读 861·2021-09-10 10:51
阅读 1266·2021-09-01 10:42
阅读 2009·2019-08-30 15:55
阅读 404·2019-08-30 15:55
阅读 2193·2019-08-30 14:21
阅读 1556·2019-08-30 13:04
阅读 3340·2019-08-29 13:09
