You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<!DOCTYPE html><html><head><metacharset="UTF-8" />
<title>Test Font Boosting</title><!--<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">--></head><body><pstyle="font-size: 24px;">Font Boosting</p><pstyle="font-size: 24px;">
Font Boosting Font Boosting Font Boosting Font Boosting Font Boosting Font
Boosting Font Boosting Font Boosting Font Boosting Font Boosting Font
Boosting Font Boosting Font Boosting Font Boosting Font Boosting
</p></body></html>
标签从 p 换到 span 再换到 h6 再到 div，各种 css 属性轮着来，发现依然没起啥作用。后来发现在我写的项目页面中，只有当一个卡片展开之后才会出现这个字体变大的情况，字数变化引起的吗？
然后就是各种 google 了，一开始都不知道搜啥关键字，只能各种尝试着搜，最后终于搜到了这个现象叫做 Font Boosting。
Font Boosting
Font Boosting 也叫做 Text Autosizer，是 Webkit 给移动端浏览器提供的一个特性：当我们在手机上浏览网页时，很可能因为原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大，保证在即不需要左右滑动屏幕，也不需要双击放大屏幕内容的前提下，也可以让人们方便的阅读页面中的文本。
前言
最近在开发一个移动端页面时，遇到一个让人费解的问题，就是
css定义的font-size与实际的font-size不一致。重现
先看一个demo，如果 demo 链接失效，请直接使用下面的代码。注意使用开发者工具打开移动端模式。
那这个页面看起来挺正常的，就一个普通的不能再普通的页面。但如果你点开开发者工具，查看他们的字体，就会发现问题。
css明明写的是font-size: 24px;，怎么计算出来的就是49.1018px。到底是哪儿出了问题？
排查
接来下就是各种原因的排查了。
标签不对？
css属性问题？还是设备问题（有些设备不会出现）？标签从
p换到span再换到h6再到div，各种css属性轮着来，发现依然没起啥作用。后来发现在我写的项目页面中，只有当一个卡片展开之后才会出现这个字体变大的情况，字数变化引起的吗？然后就是各种
google了，一开始都不知道搜啥关键字，只能各种尝试着搜，最后终于搜到了这个现象叫做Font Boosting。Font Boosting
Font Boosting也叫做Text Autosizer，是Webkit给移动端浏览器提供的一个特性：当我们在手机上浏览网页时，很可能因为原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。而Font Boosting特性在这时会自动将其中的文字字体变大，保证在即不需要左右滑动屏幕，也不需要双击放大屏幕内容的前提下，也可以让人们方便的阅读页面中的文本。解决方案
先扔出解决方案，
Font Boosting可以通过以下方法解决。initial-scale = 1max-height来避免触发。比如.class { max-height:100%; }css属性.class{ text-size-adjust:none; }（避免使用，兼容性差）缘由
知道了这个现象，也有了解决方案，那么再追根究底以下，这个浏览器在进行
Font Boosting变化的依据是什么呢？可以参考这篇文章，我这里就不再次搬运了。
The text was updated successfully, but these errors were encountered: