QQ內置瀏覽器下網頁行高、字體大小顯示異常解決打賞

最近手機端測移動網頁,偶然發現,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內置瀏覽器下網頁行高、字體大小顯示異常解決》二維碼
  • 微信打賞
  • 支付寶打賞

已有22條評論

  1. TOJTO-跨境電商

    基本上沒用過企鵝瀏覽器,一般我們做 跨境出口電商 的多用火狐和Google瀏覽器

    2016-10-25 11:09 回復
  2. 盈店通

    好用 實在好

    2016-09-20 15:00 回復
  3. 格賓網

    我也不用這個瀏覽器

    2016-08-18 17:49 回復
  4. 飛利浦呼吸機

    沒用過QQ瀏覽器

    2016-08-17 11:08 回復
  5. 一件代發

    不用QQ瀏覽器

    2016-08-04 15:02 回復
  6. 不飽和聚酯樹脂

    沒有遇到過

    2016-08-04 11:02 回復
  7. 國學經典網

    堅持自己所堅持的

    2016-08-04 09:54 回復
  8. filterpre 2016-08-03 22:11 回復
  9. 上海時刻

    http://www.xina123.com QQ內置瀏覽器下網頁行高、字體大小顯示異常解決

    2016-08-03 18:21 回復
  10. 盧松松博客

    這倒沒遇到過

    2016-08-03 17:05 回復
  11. 投資移民

    好像不怎么用qq瀏覽器

    2016-07-28 12:47 回復
    • 樸人博客

      手機qq里面點開網頁,用的就是qq瀏覽器,內置的,除非你不用qq

      2016-07-28 15:11 回復
  12. 任務易

    很少用企鵝瀏覽器,主要是不喜歡全家桶的

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

    貌似從來不用QQ瀏覽器的說。

    2016-05-19 14:23 回復
  14. 宏濤博客

    哈哈

    2016-05-13 15:30 回復
  15. 好書網

    進來看看

    2016-05-12 15:52 回復
  16. 孫浩

    樓主你好,我是做水果連鎖店加盟的,不知道你有沒有從事過水果這個行業,
    雖然網站主題和我從事行業沒有太大的關系,如果樓主也從事水果這個行業的話我希望我們可以互相交流下,
    因為我是一個新手剛開了水果店,很多都不是很懂,謝謝!

    2016-05-11 16:42 回復
  17. 不亦樂乎

    找瀏覽器間的差異最是頭疼了,我給shakira做的主題,手機下很多瀏覽器都有padding,我華為內置安卓瀏覽器就是沒有padding,也不知道什么原因。

    2016-04-28 15:08 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖