saber酱的抱枕

生于忧患,死于安乐

03/20
10:27
学习

iphone上网页字体变大/显示得很大的解决办法

刚才同事告诉我有个网页的字体很大,果不其然,他是iphone手机。

正常的情况下文字大小一致(css里设置的字号是一样的)如下:

iphone上网页字体变大/显示得很大的解决办法 Safari字体变大

在pc端各大浏览器、chrome的手机模拟器、安卓所有主流浏览器上都是正常显示。

但如果iphone上出了问题,就是字号变大:

iphone上网页字体变大/显示得很大的解决办法 Safari字体变大

有意思的是,我发现一部分文字没变大,一部分则变大了。其他地方也有类似情况。我看了看dom结构,是这样的:

iphone上网页字体变大/显示得很大的解决办法 Safari字体变大

这两部分文字一个被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
}

iphone上网页字体变大/显示得很大的解决办法