Android系統Web字體/行高異常解決打賞

相信做前端開發的朋友很多時候會遇到這樣的問題,設置行高來達到文本垂直居中的目的,但移動端會遇到略偏上或者偏下,通常情況下輕微的偏移可能出現于設備像素密度、容器高度、字體大小等原因,比如30px容器內放15px文字,就做不到完全居中,這個不在今天問題范圍,不再贅述。

今天的問題其實算是舊事重提,遇到這個問題,最初是在2015年了,當時團隊其他同事做混合app有類似問題,同事最終似乎是采用padding的形式取代了行高,但實際上這個還會引起一些問題,主要是Android系統設置字體后,WebView內字體大小深圳和字體相關的屬性都受到影響。

在去年4月份曾寫過一篇文章《QQ內置瀏覽器下網頁行高、字體大小顯示異常解決》,但是當時只注意到Android系統下手機QQ內嵌的瀏覽器,直至后期做自己的Android App使用WebView內嵌網頁,也發現了同樣的問題,經過翻閱網上資料案例,發現近期挺多類似文章和提問,主要原因是Android系統多使用sp作為單位,會根據用戶設置縮放字體。

常規的解決方法主要有以下兩種

1、針對原生App,onCreate、onRestart都加上以下兩行代碼

DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
displayMetrics.scaledDensity = displayMetrics.density;

2、針對WebView

WebSettings webSettings = webView.getSettings();
webSettings.setTextZoom(100);

方法1做到的是類似微信的,整個App字體都不受系統影響。本文主題是Web,所以如果我們是純粹的混合App,可以采用方法2直接設置禁止縮放。如果我們只是做Web開發,可能希望在手機QQ、自己App內嵌等情況下都正常,同時我們又只能從Web端著手,那么建議使用整站rem的形式,比如使用淘寶的flexible,但是flexible也是沒有解決這個問題,所以我們自己對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;
}
Android系統Web字體/行高異常解決
文章《Android系統Web字體/行高異常解決》二維碼
  • 微信打賞
  • 支付寶打賞

已有4條評論

  1. 111

    友情鏈接申請
    經常到你的博客瀏覽,覺得你的博客內容不錯,
    網站地址:http://www.yuedutop.cn/
    日IP500
    網站名稱:動感博客網
    同意的話請到本站留言,
    同時也歡迎大家到本站申請友鏈,首頁,內頁 均可

    2017-08-07 19:43 回復
  2. 面試技巧

    博主是安卓內核開發大神呀

    2017-07-26 14:50 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖