Android 系統字體大小動態改變,導致webview中顯示不兼容的問題解決

嘮叨幾句:

在移動端再開發的過程中,很容易使用到webview,它也是用來混合開發的中間橋梁,因此解決webview使用過程中出現的問題是非常有必要的;

問題現象與發現:

現象:

日前,在是使用webview加載html過程中出現了一個這樣的問題:

  • 頁面顯示變形;

  • url中有設置圖片,圖片展示不全呈截斷式;

發現:

其他所有手機都正常,只有一部手機顯示不正常(上級的手機,哎);
后來發現該手機比同款同型號手機顯示字體略大,才發現該手機系統字體大小被重置;
經過半天測試,出現此問題的必要條件有三:

  • html頁面采用了rem單位,并且是采用js動態計算html的font-size

  • html頁面被加在了APP中的webview中

  • 手機被重設了字體大小

解決方案:

一.移動端解決方案

一行代碼:

webView.getSettings().setTextZoom(100);

方案一雖然看起來比較簡單,但是如果我們項目已經上線了,就需要重新發版App,就需要更新等一系列操作;再者如果html其他移動端也有使用,這....接下來會發生的事情就靠大家慢慢猜想了!

二、前段兼容,

話不多說直接上代碼:

 var docEl = document.documentElement,
                        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                        recalc = function () {
                            var clientWidth = docEl.clientWidth || 375;
                            clientWidth > 750 ? clientWidth = 750 : clientWidth = clientWidth;
                            if (clientWidth){
                                const fz = docEl.style.fontSize = 20 * (clientWidth / 375);
                                docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
                                window.remscale = clientWidth / 375;
                                var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace('px','')*10000)/10000
                                if (fz !== realfz) {
                                    document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) +"px";
                                }
                            }
                        };
                    if (document.addEventListener){
                        window.addEventListener(resizeEvt, recalc, false);
                        document.addEventListener('DOMContentLoaded', recalc, false);
                    }

這段代碼,是跟前端開發一起調試驗證OK的

在此,感謝前端同學

嘿嘿,咱是移動端開發者,看到這個代碼有些蒙蔽,前端開發者一定看得懂...

以上就是解決方式了,希望對您有所幫助...

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。