03/20
2017
刚才同事告诉我有个网页的字体很大，果不其然，他是iphone手机。
正常的情况下文字大小一致（css里设置的字号是一样的）如下：
在pc端各大浏览器、chrome的手机模拟器、安卓所有主流浏览器上都是正常显示。
但如果iphone上出了问题，就是字号变大：
有意思的是，我发现一部分文字没变大，一部分则变大了。其他地方也有类似情况。我看了看dom结构，是这样的：
这两部分文字一个被span标签包裹，一个没有其他标签包裹。结果后者变大了。
我对此有个猜想：
在同一个父元素里的文字，如果有一个被其他标签包裹了，是否应该给另外的文字也统一加个标签呢，这样是否可以让iphone也不变大？
不过这个猜想我没有继续深究，还是从网上找了解决办法。
下面解决办法适用的情况不同，如果不清楚的话可以挨个试试。
1.禁止css的-webkit-text-size-adjust属性（chrome似乎已经抛弃这个属性了，但Safari还有效）：
@media screen and (max-device-width: 640px){body{-webkit-text-size-adjust:none;}}
我的用这个办法解决了。
参考来源 （这个文章已经包含了本文全部3种解决办法，很厉害。只是最后max-device-width这里我没修改也在iphone6上生效了，不是很懂）
2.给元素/父元素设置宽高，或设置max-height，或设置initial-scale = 1。
这个办法用于解决font boosting引起的字体变大问题。
不过这个办法对本文开头的情况无效。
ps：虽说font boosting是Webkit提供的特性，但我在chrome上从来没遇到过这问题。
3.我还遇到以上两种办法都不起效的，只能调小font-size。比如原font-size为24px，在iphone上显示的有30px以上。那我们把font-size改成18px，在iphone上看上去差不多就正常了。
但这样的话，正常的浏览器上就又显得小了。如有必要可以考虑用JavaScript判断是不是iphone，是的话修改font-size，不是的话则不改。例如：
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
if(bIsIphoneOs ) { //如果是ios
//code
}else{ //如果不是ios
//code
}
