移动端字体一些小坑

最近做了公司移动端基于淘宝flexible的改版，在字体大小存在两个坑，记录下。

1.Font Boosting

字体增强，这个特性也被称做Text Autosizer或者Font Inflation，是 Webkit 给移动端浏览器提供的一个特性。当我们在手机上看到的页面原始宽度较大，手机屏幕缩小后就看不清楚文字了，这个特性就会放大页面中的文字，保证在不左右滑动的情况下也能让人方便的阅读页面中的文字,如下图所示。

注：Font Boosting只会在没有设置宽高的文本流中才会被触发

对于前端狗来说，这个特性显得并不那么重要。要解决这个问题其实考虑给元素设置宽高即可，显然文本内容不可能都指定宽高。我们利用max-height属性,如p { max-height: 999999px; }就能解决这个问题了。

嫌麻烦的也可以直接

body, body * {
    max-height: 999999px;
}

至于Font Boosting的机制可以参考https://docs.google.com/document/d/1PPcEwAhXJJ1TQShor29KWB17KJJq7UJOM34oHwYP3Zg/edit?pref=2&pli=1

2.andriod UC浏览器字体放大

在Android 4.2以下的机型中，UC浏览器判断到页面上文字居多时，会自动放大字体优化移动用户体验。这个尤其会出现在flexible写列表的情况下。可以通过<meta name="wap-font-scale" content="no">禁用掉这个优化。

当然，最好的解决方案是将html语义化分块，利用<section>、<nav>、<footer>等标签划分，这样字体一般都不会由于居多而放大。