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

標籤：ted   max   開啟   nbsp   math   問題：   com   是你   內容   

 

首先，我們做了一個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