1. 程式人生 > >解決因為手機設定字型大小導致h5頁面在webview中變形的bug

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

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

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

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

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

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

好,你怎麼也不會想到是手機設定字型大小造成的。因為預設瀏覽器中的內容是不受系統字型大小設定控制的,至少我遇到的幾臺手機都是這樣的情況。但是APP不一樣,APP是受那個玩意兒控制的!!

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

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

解決方法

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

以下是我的完整程式碼:

functionhtmlFontSize(){ 

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