pad平板打开网站字体变大的解决方案
前言
这是个非常有意思的情况，由于我一直没有平板设备，所以这个问题一直都没有遇到，我一直相信在pc端通过媒体查询就可以适配到所有的机型，加上我用手机查看的时候，也是没有问题的，所以一直相信至今。
结果我最近收了一台二手平板来帮助我学习的时候，发现出了一个大问题，在pad端访问我的主题，首页文章的卡片字体会突然被放大了，我以为是css的问题，结果调试的时候发现css没有变化，但是实际渲染的字体大小由原来的13px变成了20.0549px，这显然有问题。
而且我发现只有p元素字体会发生这种情况，贼奇怪，难道语义标签会带着隐性的兼容问题？
这是在平板中的效果，p元素的字体比标题还大了。
这张是我在电脑端设的实际效果：
在电脑中我设计的内容字体是比标题字体小的，但是实际却是相反的状态。
解决办法
如果你的项目使用了normalize.css，你会发现项目不会出现这种问题，
国内使用normalize.css作为样式重置库可能会比较多一点，国外还有一个sanitize.css也可以避免这个问题。
这说明什么？
这说明是默认样式的一些特性导致的，这两个库都做了统一化的效果处理，所以不会有这个问题。
查了半天找到一篇国外的文章：《Your CSS reset needs text-size-adjust (probably)》
他主要说明了平板设备为了能够让用户能够更好的阅读，它会将字体调大，这种行为在手机上不会触发，只有在pad上才会，作为提高非移动优化网站可读性的一种方式。
非移动优化网站就是没有做响应式的网站，这个情况在以前还是很常见的，很多网站并没有针对pad端的样式优化，甚至移动端都没有，而pad端又要去仿pc模式访问网站，本身屏幕也没有电脑显示器大，一些字体自然会变的很小，为了解决这个问题，才有将字体放大。
这也是为什么我用平板访问时，字体变大的原因，当我将浏览器切换为移动端时，就不会有这个问题了，但是显然这种做法只能自己测试用，用户那边是不合理的。
于是我们需要对样式的默认行为做一个重置，统一下这个效果。
常见的做法就是通过给html添加一个text-size-adjust: none;来实现，然后子元素会继承这个效果，这样所有的元素字体大小都恢复正常了。
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}你会发现上面提到的两个样式重置的库都喜欢设置成100%。
html {
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}实际上你去浏览器的计算属性面板上看，none最后被浏览器展示为100%，所以这两种写法并无区别。
至此又解决了一个样式问题，可喜可贺。
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
全部评论 7
gg
Google Chrome Windows 10神仙
Safari iPhone木灵鱼儿
FireFox Windows 10泽泽
Google Chrome MacOS木灵鱼儿
FireFox Windows 10泽泽
Google Chrome MacOS看了下tw果然有
```
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
```
木灵鱼儿
FireFox Windows 10