开发移动端页面时，字体自动变大

前言：

工作中开发移动端页面时会有部分内容字体无故变大，自己排查代码却没有解决，后来搜索问题才发现这是webkit内核下的特性 Text Autosizer」，又称「Font Boosting」、「Font Inflation」导致的。

问题描述

之前开发移动端页面，发现同一个页面里有的内容字体大小会无故变大，有的却正常。例如，你设置font-size: 40px;,但是实际为60px。

Markdown

解决之路

没办法，自己搜索一下。一看还真有人遇到我和一样的问题。

首先，这个准确说不是由开发人员导致的bug,这是webkit内核移动浏览器特性导致的，这个特性被称做「Text Autosizer」，又称「Font Boosting」、「Font Inflation」，是 Webkit 给移动端浏览器提供的一个特性：当我们在手机上浏览网页时，很可能因为原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大，保证在即不需要左右滑动屏幕，也不需要双击放大屏幕内容的前提下，也可以让人们方便的阅读页面中的文本。

问题解决思路：关闭该特性或让其无效，让字体无法变大

解决方法：

• 元素单独设置width或height或max-height；

推荐{max-height：100%;}，因为内容显示一般不会固定高和宽。

• 给元素设置 -webkit-text-size-adjust: none;

可禁用Text Autosizer，这个属性还能使得我们在移动端使用小于12px的字体。此属性在桌面版中无效。

• WebKit 中应该有判断如果initial-scale=1时，不触发Text Autosizer
  目的是为了放大，而设置屏幕不能放大，自然Text Autosizer就失去的意义

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 或 -->
<meta name ="viewport" content ="initial-scale=1, maximum-scale=1, minimum-scale=1">

个人思考

什么条件下会触发这个Text Autosizer??

个人水平有限，如有不对之处，还望指正！！！

参考链接

webkit内核下，字号会自动放大的问题

做一个手机端页面时，遇到了一个奇怪的问题：字体的显示大小，与在CSS中指定的大小不一致