嘮叨幾句:
在移動端再開發的過程中,很容易使用到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的
在此,感謝前端同學
嘿嘿,咱是移動端開發者,看到這個代碼有些蒙蔽,前端開發者一定看得懂...
以上就是解決方式了,希望對您有所幫助...