問題描述:
調整好的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
