开发移动端页面时，字体自动变大
2017-03-23 本文已影响0人
朋友喜欢叫我春哥
前言：
工作中开发移动端页面时会有部分内容字体无故变大，自己排查代码却没有解决，后来搜索问题才发现这是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??
个人水平有限，如有不对之处，还望指正！！！
参考链接
