安卓下設置系統字體大小影響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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM