首先，我們做了一個H5頁面，在各種手機瀏覽器中打開都沒問題。我們采用了rem單位進行布局，通過JS來動態計算網頁的視窗寬度，動態設置html的font-size，一切都比較完美。

這時候，你自信滿滿的將h5地址交給了APP工程師，做了一個WEBVIEW嵌套，然後就順利交工了。

測試組在一堆手機中測試APP，突然，在某個手機上打開，你的頁面布局了亂了，字變大或者變小，總之很奇葩。

你懷疑是APP的問題，但是客戶端死活不承認。你在該手機瀏覽器中查看，確保沒有一毛錢問題，也死活不承認是你的問題。於是測試人員對你倆不死不休的要求修改。於是，客戶端給你加了調試工具後，你打開chrome進行調試，發現一個非常非常奇葩的問題：

我明明設置的html字號是100px，為什麽在APP中就變成了86（或者其他數字），你找遍所有的代碼，都沒有發現這個86是從哪裏來的，你快瘋了！！找了N多人幫忙，都沒能解決這個問題！！我很希望能夠告訴你，趕緊來看我這篇博文，因為，你現在經歷的一切，我TM剛剛經歷過~~

好，你怎麽也不會想到是手機設置字體大小造成的。因為默認瀏覽器中的內容是不受系統字體大小設置控制的，至少我遇到的幾臺手機都是這樣的情況。但是APP不一樣，APP是受那個玩意兒控制的！！

問題描述清楚了，出現這個問題，有以下因素

1. 你的頁面采用了rem單位，並且是采用js動態計算html的font-size
2. 你的頁面被加在了APP中的webview
   中
3. 這該死的手機被重設了字體大小

解決方法

一般，我們動態計算好html的font-size之後，我們就啥都不幹了，就走了。但是，我們現在知道了，我們設置的大小不一定是真實的大小，所以，我們需要在設置完字體大小之後，再去重新獲取一下html的font-size，看看實際的這個值，和我們設置的是不是一樣。如果不一樣，就要根據比例再設置一次。

以下是我的完整代碼：

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";
    }
}
 

解決因為手機設置字體大小導致h5頁面在webview中變形的BUG