前段时间回头去写纯静态Html页面涉及到手机端匹配的时候，遇到了特别棘手的问题

如图设置font-size是14px，可是Chrome实际渲染是42px但是同页面另外同样的标签却没有任何问题

所有的CSS样式都删除依然无法生效，在想是不是动态设置了viewport的问题

问题依然无法解决，直至偶然看到一篇文章： 才算是彻底解决了这个问题

简单来說这也是webkit挖的一个坑这个特性被称为「Text Autosizer」，最初的目的是希望手机端访问网页因为宽度过大而看不清字体提出的一种解决方案。这个方案就是将字体适度的增大保证既可以不缩放页面，也能看清文字信息

特性很好但是一旦所有的元素都得按照设计稿一点点敲定的时候，这个特性就变得十分恶心了

解决方案和原理在引入的这篇文章里面也有详细的解释再复述一次吧：

1.用viewport的width手动指定宽度，但是对我的頁面没什么效果

3.单独给搞事的那段标签设置max-width这样问题就不会出现了

发布了9 篇原创文章 · 获赞 1 · 访问量 1万+