QQ内置浏览器下网页行高、字体大小显示异常解决打赏

最近手机端测移动网页,偶然发现,iOS下访问都正常的页面,Android下微信内嵌浏览器、自带浏览器等都正常,唯独手机QQ内嵌浏览器下显示略不正常,比如设置了16px字体,看起来明显没有16px,而网页部分元素是由行高撑起的,没有固定高度。于是,正常的页面在QQ内嵌浏览器中显示出现没有垂直居中、元素高度缩小等。

一开始以为是兼容问题,简单搜了下,只有看到知乎上有人问类似问题,感觉有点不可思议,感觉这么"大"的问题不可能没人发现,于是就怀疑自己的写法是否有问题,首先打开页面时,在界面上打出某元素的font-size,结果,和设置的值14px相差甚远,算了一下,只有设置像素的79%。没办法,就把原先没有固定高度的元素按照正常设备上最终显示的高度设置了固定高度,字体设置行高为1,采用padding或者margin实现垂直居中,这样以来,虽然字体小点,高度小点,但至少设计的垂直居中效果在QQ内置浏览器中显示基本正常了。期间,也尝试通过js动态改变根元素的字体的方式,基本恢复了设计的界面效果,但还是感觉怪怪的,最终没有采用。

今天偶然想起来,个人有个癖好,电脑、手机什么的都设置最小图标、最小字体,刚买手机那会貌似给系统设置了小字号,难道是这个原因引起的?果断调整系统字体,重新打开问题页面,居然就这样正常了,原来纠结了一晚上的问题竟然是因为手机设置的原因。所以,这个问题归根结底就不算是问题了。

不过好奇的是,微信及其他软件都没有影响,唯独QQ内嵌浏览器下影响,到底应用软件该不该取系统字体随之改变呢?是QQ太遵守标准了还是其他软件不按常规出牌呢?这个也不得而知了。简单记录一下,方便遇到类似问题的同学不绕弯路。



QQ内置浏览器下网页行高、字体大小显示异常解决
文章《QQ内置浏览器下网页行高、字体大小显示异常解决》二维码
  • 微信打赏
  • 支付宝打赏
  1. 楼主你好,我是做水果连锁店加盟的,不知道你有没有从事过水果这个行业,
    虽然网站主题和我从事行业没有太大的关系,如果楼主也从事水果这个行业的话我希望我们可以互相交流下,
    因为我是一个新手刚开了水果店,很多都不是很懂,谢谢!

  2. 找浏览器间的差异最是头疼了,我给shakira做的主题,手机下很多浏览器都有padding,我华为内置安卓浏览器就是没有padding,也不知道什么原因。

无觅相关文章插件,快速提升流量