解決因為手機設置字體大小導致h5頁面在webview中變形的BUG
首先，我們做了一個H5頁面拧粪，在各種手機瀏覽器中打開都沒問題修陡。我們采用了rem單位進行布局，通過JS來動態(tài)計算網(wǎng)頁的視窗寬度可霎，動態(tài)設置html的font-size魄鸦，一切都比較完美。
這時候癣朗，你自信滿滿的將h5地址交給了APP工程師拾因，做了一個WEBVIEW嵌套，然后就順利交工了旷余。
測試組在一堆手機中測試APP绢记，突然，在某個手機上打開正卧，你的頁面布局了亂了庭惜，字變大或者變小，總之很奇葩穗酥。
你怎么也不會想到是手機設置字體大小造成的。
因為默認瀏覽器中的內(nèi)容是不受系統(tǒng)字體大小設置控制的惠遏，至少我遇到的幾臺手機都是這樣的情況砾跃。但是APP不一樣，APP是受那個玩意兒控制的＝谒薄抽高！
問題描述清楚了，出現(xiàn)這個問題透绩，有以下因素
> 1.你的頁面采用了rem單位翘骂，并且是采用js動態(tài)計算html的font-size
> 2.你的頁面被加在了APP中的webview中
> 3.這該死的手機被重設了字體大小
二、解決
方案一：【h5解決】
需要在設置完字體大小之后帚豪，再去重新獲取一下html的font-size碳竟，這樣就可以實現(xiàn)當實際的值與我們設置的值不一樣時，根據(jù)比例再設置一次狸臣。
function htmlFontSize(){
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var width = w > h ? h : w;
width = width > 720 ? 720 : width
var fz = ~~(width*100000/36)/10000
document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz +"px";
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";
}
}
方案二：【客戶端解決】
iOS
在iPhone系統(tǒng)設置中的“更大字體”里調(diào)整字號后莹桅，各個應用里中Webview里的文字大小似乎沒有受到影響。但是對于諸如微信烛亦、UC瀏覽器等可以在APP里設置網(wǎng)頁字體大小的應用诈泼，還是有限制調(diào)整字號的需求的懂拾。它們調(diào)整字體大小是通過給body設置-webkit-text-size-adjust屬性實現(xiàn)的，因此只要限制這個屬性不被修改即可：
body {
-webkit-text-size-adjust: none !important;
}
Android
如果是在自己開發(fā)的APP中铐达，可以在客戶端的WebView組件中設置字體默認的縮放比例岖赋，以避免手機系統(tǒng)的字體修改對頁面字體及布局造成影響。
WebSettings settings = webView.getSettings();
settings.setTextZoom(100);
