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

分类：设计园地 | 2016-04-27 21:59:16 | 浏览(18,933)

23条评论

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

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

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

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

2017.4.20更新

前期因为没有使用rem作为移动端样式单位，后面为了简单的适配ipad等，通过gulp脚本将px转换为了rem，并且加入了淘宝那套lib-flexible，可惜的是，并没有解决问题，因为知道了出现如上异常是因为设置字体和计算后字体不一致，就加了如下代码作为适配。

function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
        width = 540 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    var computedFontSize = parseFloat(win.getComputedStyle(docEl).fontSize);
    if (rem !== computedFontSize) {
        rem = +(rem * rem / computedFontSize).toFixed(4);
        docEl.style.fontSize = rem + 'px';
    }
    flexible.rem = win.rem = rem;
}

refreshRem函数内部设置fontSize之后通过getComputedStyle获取计算后的值，然后根据比例计算实际应设置的root em大小，然后重新赋值即可，如此完美解决了Android手机环境下出现的各种字体不对的情况。另外有朋友遇到这样的问题，给他大概描述过之后，他曾修改lib-flexible并提交PR，但截至更新文章，并未合并。

QQ内置浏览器下网页行高、字体大小显示异常解决
 文章《QQ内置浏览器下网页行高、字体大小显示异常解决》二维码
  • 微信打赏
  • 支付宝打赏

已有23条评论

  1. 亚马逊图片设计

    很好的学习文章！谢谢！

    2021-07-28 06:28 回复
  2. TOJTO-跨境电商

    基本上没用过企鹅浏览器，一般我们做 跨境出口电商 的多用火狐和Google浏览器

    2016-10-25 11:09 回复
  3. 盈店通

    好用 实在好

    2016-09-20 15:00 回复
  4. 格宾网

    我也不用这个浏览器

    2016-08-18 17:49 回复
  5. 飞利浦呼吸机

    没用过QQ浏览器

    2016-08-17 11:08 回复
  6. 一件代发

    不用QQ浏览器

    2016-08-04 15:02 回复
  7. 不饱和聚酯树脂

    没有遇到过

    2016-08-04 11:02 回复
  8. 国学经典网

    坚持自己所坚持的

    2016-08-04 09:54 回复
  9. filterpre

    filter plate http://www.hbfilterpress.com

    2016-08-03 22:11 回复
  10. 上海时刻

    http://www.xina123.com QQ内置浏览器下网页行高、字体大小显示异常解决

    2016-08-03 18:21 回复
  11. 卢松松博客

    这倒没遇到过

    2016-08-03 17:05 回复
  12. 投资移民

    好像不怎么用qq浏览器

    2016-07-28 12:47 回复
    • 朴人博客

      手机qq里面点开网页，用的就是qq浏览器，内置的，除非你不用qq

      2016-07-28 15:11 回复
  13. 任务易

    很少用企鹅浏览器，主要是不喜欢全家桶的

    2016-06-14 10:45 回复
  14. 夏日博客

    貌似从来不用QQ浏览器的说。

    2016-05-19 14:23 回复
  15. 宏涛博客

    哈哈

    2016-05-13 15:30 回复
  16. 好书网

    进来看看

    2016-05-12 15:52 回复
  17. 孙浩

    楼主你好，我是做水果连锁店加盟的，不知道你有没有从事过水果这个行业，
    虽然网站主题和我从事行业没有太大的关系，如果楼主也从事水果这个行业的话我希望我们可以互相交流下，
    因为我是一个新手刚开了水果店，很多都不是很懂，谢谢！

    2016-05-11 16:42 回复
  18. 不亦乐乎

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

    2016-04-28 15:08 回复

（必填）

（必填）

（可选）