如何消除手機設置的字體大小對Cordova app(Android)界面font-size的影響


  ===================== 更新分割線 ===================

  現在發現其實不需要用安卓編輯器打開,也能找到這個文件,路徑是platforms\android\CordovaLib\src\org\apache\cordova\engine\SystemWebViewEngine.java,用任意編輯器打開修改即可。

  ===================== 以下是原文 ===================  

  最近在用vue+cordova做一個app,前期一直在PC上看效果,今天試着打包成了app,想看看在手機上運行的效果。結果發現和預期的效果不一樣,很多布局有一些錯位。可是明明我在PC上調試的時候,有切換不同型號的手機看效果的,都沒有問題,排版和布局也都是用的rem,按道理應該顯示效果不會出現那么大的紕漏的。

  后來發現是因為我修改設置了手機的顯示字體大小的,如果我將手機字體大小改為標准的,則顯示效果就正常了,所以我就在網上搜索了一下消除這種影響的解決辦法,百度到了這么一個方法:

  webView.getSettings().setTextZoom(100);

  這行代碼的作用主要是設置webview里的字體不跟隨系統字體發生改變。

  好了,解決辦法有了,那么問題來了,在哪里加上這行代碼呢?我不懂原生代碼,也是剛剛開始接觸hybrid app和cordova,知道這個得在安卓代碼里改,可是卻不知道去哪里改。然后我可愛的老公幫我解決了,手動表白老公 @吃饅頭的火雞。

  下面附上如何添加此代碼:

  用過cordova的朋友知道,用cordova打包app之前,先要添加一個platform,我這里添加的是Android平台,添加以后,其實就是生成了一個安卓的解決方案工程,將這個工程用Android Studio(其他的可開發安卓的編輯器應該也行)打開,就能看到里面的java代碼。

  找到 CordovaLib\java\org.apache.cordova\engine\SystemWebViewEngine.java 文件,里面有一個 initWebViewSettings 方法,在里面可以對webView進行一些修改。

1 webView.setInitialScale(0);
2 webView.setVerticalScrollBarEnabled(false);
3 // Enable JavaScript
4 final WebSettings settings = webView.getSettings();
5 settings.setJavaScriptEnabled(true);
6 settings.setJavaScriptCanOpenWindowsAutomatically(true);
7 settings.setLayoutAlgorithm(LayoutAlgorithm.NORMAL);

 

  這是其內部其中的一部分代碼,我們緊接着這些代碼之后追加設置字體的代碼即可,因為這里面有把webView.getSettings()賦值給settings變量,所以我們只需在其后追加

  settings.setTextZoom(100);

  即可。

  ok,保存一下,重新打包app,完美解決。

 


免責聲明!

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



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