How to ignore font size changes for Cordova app when running on Android 4.4+?

Question

I developed a Cordoba app with Cordoba version 3.6.3 and jQuery. The only problem that I still can’t get the best solutions for is when I test my application on Android 4.4+, and there are users who like to change the font size in the settings> display> font-size of their device to be larger normal, This leads to the fact that the layout of my application looks ugly (the best screen is when the font size setting is normal). But there is no effect of font size adjustment for Android older than 4.4 (4.3,4.2 ...). Thus, the application is displayed perfectly in the old version.

The solutions I applied to my application is to create a custom plugin to change the configuration, and it will detect if the user is using Android 4.4+, and if they set the font size setting to anything that is not normal, I use jQuery to format the size font to the specified size.

Example:

if (font_scale == huge) { $("div").css("font-size","20px !important"); } 

This works great, but sometimes after loading the css page it doesn't change as I want. And suppose if there are 30 div + on this page, so I have to insert the instruction as described above 30 times, and it takes too much time.

I just want to know if there are other ways to solve this problem, which is easier than using this plugin? Perhaps using some XML properties or CSS3 properties that can cause my application to display correctly without the side effect of adjusting the font size of Android 4.4?

Other ways that I also tried and it doesn’t work,

• paste fontScale on Androidmanifest.xml> activity tag
• insert webkit-text-size-adjust: none; in css

I would like to hear any ideas that will help solve this problem.

Answer 1

So, you just want to ignore the system font settings. Here is the solution, I am using MobileAccessibilty Plugin to ignore the system font settings.

You just need to write the following code in your onDeviceReady function in index.js

 if(window.MobileAccessibility){ window.MobileAccessibility.usePreferredTextZoom(false); } 

usePreferredTextZoom (false) just ignores the system font settings. :) :) :)

Answer 2

Try removing this from your index.html:

target densitydpi = dpi

Good luck.

Answer 3

Here is a new solution, I hope it helps you. Decision

  //in base activity add this code. public void adjustFontScale( Configuration configuration) { configuration.fontScale = (float) 1.0; DisplayMetrics metrics = getResources().getDisplayMetrics(); WindowManager wm = (WindowManager) getSystemService(WINDOW_SERVICE); wm.getDefaultDisplay().getMetrics(metrics); metrics.scaledDensity = configuration.fontScale * metrics.density; getBaseContext().getResources().updateConfiguration(configuration, metrics); } @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); adjustFontScale( getResources().getConfiguration()); } 

Answer 4

• If your plugin allows you to know the font size, change all your font sizes to em and use $(document.body).css("font-size","70%"); just one time.

• Could you share your plugin?

Answer 5

It's quite old, but since I still needed it in 2019, someone else might need it.

If for some reason you do not want (or cannot) integrate the whole plug-in for one functionality, here is the extracted usePreferredTextZoom(false) functionality (from the MobileFirst 7.1 application based on Cordova). Of course, it's all about the guys developing the plugin.

In the main Java file of your Cordova application for Android, change the onInitWebFrameworkComplete method by adding a call to the preventDeviceZoomChange() method:

 public void onInitWebFrameworkComplete(WLInitWebFrameworkResult result){ if (result.getStatusCode() == WLInitWebFrameworkResult.SUCCESS) { super.loadUrl(WL.getInstance().getMainHtmlFilePath()); preventDeviceZoomChange(); } else { handleWebFrameworkInitFailure(result); } } 

In the same class, define the preventDeviceZoomChange() method:

 private void preventDeviceZoomChange() { try { Method getSettings = (this.appView).getClass().getMethod("getSettings"); Object wSettings = getSettings.invoke(this.appView); Method setTextSize = wSettings.getClass().getMethod("setTextSize", WebSettings.TextSize.class); setTextSize.invoke(wSettings, WebSettings.TextSize.NORMAL); } catch (NoSuchMethodException e) { e.printStackTrace(); } catch (InvocationTargetException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } catch(Exception e) { e.printStackTrace(); } } 

Answer 6

Hope this helps!

In Cordoba 8.0:

Edit MainActivity.java

Add links to the file header:

 import android.webkit.WebView; import android.webkit.WebSettings; 

Add the code after the loadUrl method:

 loadUrl(launchUrl); WebView webView = (WebView)appView.getEngine().getView(); WebSettings settings = webView.getSettings(); settings.setTextSize(WebSettings.TextSize.NORMAL); 

Only this way it worked for me.