移动端 webkit内核浏览器 字号会自动放大问题

本文主要是介绍移动端 webkit内核浏览器 字号会自动放大问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题描述：

        有时候在做移动端页面的时候，会发现某些字体会自动放大，而页面中另外一部分倒是对的。

原因：

        Chromium内核提升移动端文本可读性的一个特性，叫作这个特性被称作「Text Autosizer」，又称「Font Boosting」、「Font Inflation」。其计算规则伪代码如下

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

解决方法：

1. 元素单独设置height或max-height
2. 设置 -webkit-text-size-adjust: none;

PS: WebKit 中应该有判断如果initial-scale=1时，不触发Font Boosting。

这篇关于移动端 webkit内核浏览器 字号会自动放大问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---