安卓下設置系統字體大小影響H5頁面佈局

問題描述:

　　調整好的h5頁面,放在安卓app內嵌頁面後佈局正常,後來用戶調整系統裏面字體大小，後內嵌H5佈局亂掉

問題分析：

　　由於用戶調整了系統字體的大小,修改了根節點和body節點的font-size,而個人單位和字體大小採用的是rem和em，因此根節點與body節點font-size的改變確定會影響到個人字體的大小和單位長度的展示

問題確認：

　　初步分析問題後,須要真實的模擬環境，看看是否如我所說,根節點的font-size和body節點的font-size真的改變了，我在頁面上面添加一個按鈕,點擊彈出根節點的font-size和body節點的font-size.經確認,body節點的font-size確實改變了,可是根節點的font-size並無改變，這肯定一個問題,由於我字體採用的是em,em單位天然和body節點的font-size有關,可是個人長度採用的是rem,而rem只和根節點的font-size有關,既然根節點的font-size並無改變,那爲何我h5裏面的長度改變了呢

問題繼續查找:

　　正在我苦思冥想之際,忽然發現個人一個元素寬度設置爲360px(注意這個時候個人手機也是360px),而這個元素的寬度居然不是撐滿全屏，由此能夠推斷,當用戶修改系統字體大小的時候,回動態修改1px所表明的實際像素。這個就屬於系統級的了,若是是安卓app原生開發卻是能夠採用dp爲單位規避這個問題,可是咱們h5只能用px

問題再確認:

　　首先是兩個問題：

　　　　1-字體大小改變，由於body節點font-size的變化影響到我以em爲單位的字體大小

　　　　2-單位長度改變，由於用戶調整系統字體大小後,改變了在系統內部1px所表明的實際像素,因此使得個人長度與實際長度不服

問題解決:

　　若是有一個方法可使得用戶設置字體大小不干擾到我h5內部的字體就行了,果真,安卓提供了一個方法:webview.getSettings().setTextZoom(100),這個方法是設置webview內部字體的縮放比例,而字體單位是px,它其實設置的是px的縮放比例,咱們經過強制設置爲100%，來使得用戶的外部設置干擾不到咱們內部webview的字體大小呈現。而由於限制了px的縮放比例,咱們的長度也最終得以正常呈現。

注:對於em和ren原理不是很瞭解的同窗能夠參考:http://www.cnblogs.com/noobfly/p/6207832.html