嘮叨幾句：

在移動端再開發的過程中，很容易使用到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的

在此，感謝前端同學

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

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