解決因為手機設定字型大小導致h5頁面在webview中變形的bug
阿新 • • 發佈:2019-02-01
首先,我們做了一個H5頁面,在各種手機瀏覽器中開啟都沒問題。我們採用了rem
單位進行佈局,通過JS來動態計算網頁的視窗寬度,動態設定html
的font-size
,一切都比較完美。
這時候,你自信滿滿的將h5
地址交給了APP工程師,做了一個WEBVIEW
巢狀,然後就順利交工了。
測試組在一堆手機中測試APP
,突然,在某個手機上開啟,你的頁面佈局了亂了,字變大或者變小,總之很奇葩。
你懷疑是APP
的問題,但是客戶端死活不承認。你在該手機瀏覽器中檢視,確保沒有一毛錢問題,也死活不承認是你的問題。於是測試人員對你倆不死不休的要求修改。於是,客戶端給你加了除錯工具後,你開啟chrome
進行除錯,發現一個非常非常奇葩的問題:
我明明設定的html
字號是100px
,為什麼在APP
中就變成了86
(或者其他數字),你找遍所有的程式碼,都沒有發現這個86
是從哪裡來的,你快瘋了!!找了N多人幫忙,都沒能解決這個問題!!我很希望能夠告訴你,趕緊來看我這篇博文,因為,你現在經歷的一切,我TM剛剛經歷過~~
好,你怎麼也不會想到是手機設定字型大小造成的。因為預設瀏覽器中的內容是不受系統字型大小設定控制的,至少我遇到的幾臺手機都是這樣的情況。但是APP不一樣,APP是受那個玩意兒控制的!!
問題描述清楚了,出現這個問題,有以下因素
- 你的頁面採用了
rem
單位,並且是採用js
動態計算html
的font-size
- 你的頁面被加在了APP中的
webview
- 這該死的手機被重設了字型大小
解決方法
一般,我們動態計算好html
的font-size
之後,我們就啥都不幹了,就走了。但是,我們現在知道了,我們設定的大小不一定是真實的大小,所以,我們需要在設定完字型大小之後,再去重新獲取一下html
的font-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”;
}
}