13

I've developed Cordova App with Cordova Version 3.6.3 and JQuery. The only one problem that i still can't get the best solutions is when i test my app on Android 4.4+ and there are users who love to change font size in setting > display > font-size of their device to be larger than normal. It causes my app layout displays ugly (the best display is when the font-size setting is normal only). But there is no effect of font-size setting for Android older than 4.4 (4.3,4.2...) So the app displays perfectly on older version.

The solutions that I've applied to my app is creating the custom plugin to detect configuration changed and it will detects if user uses Android 4.4+ and if they set font-size setting to anything that is not normal, I'll use JQuery to force font-size to the specified size.

Example is....

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

This works fine but sometimes after the page loaded, the css doesn't changes as I want. And suppose if there are 30 divs+ on that page so i must insert the statement like above 30 times and it takes too much time needlessly.

I just want to know, are there another ways to solve this problem that is easier than using this plugin? Maybe using some XML configuration or CSS3 properties that can makes my app displays properly without side effect from font-size setting of Android 4.4?

Another ways I also tried and it doesn't works are

  1. inserting fontScale on Androidmanifest.xml > activity tag
  2. inserting webkit-text-size-adjust:none; in css

I'd love to hear any ideas that help to solve this.

fredtantini
  • 15,966
  • 8
  • 49
  • 55
Vicente Tentativa
  • 131
  • 1
  • 3

6 Answers6

15

I hope this helps!

In Cordova 8.0:

Edit MainActivity.java

Add references in the file header:

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

Add the code after loadUrl method:

loadUrl(launchUrl);

WebView webView = (WebView)appView.getEngine().getView();
WebSettings settings = webView.getSettings();

settings.setTextSize(WebSettings.TextSize.NORMAL);

Only this way worked for me.

Paulo Henrique Arruda
  • 439
  • 5
  • 6
14

So you just want to ignore the system font preferences. Here is the solution,I use MobileAccessibilty Plugin to ignore the system font preferences.

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

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

usePreferredTextZoom(false) will just ignore the system font preferences. :) :) :)

Anuj.T
  • 1,598
  • 16
  • 31
3

Try to remove this one from your index.html:

target-densitydpi=device-dpi

Good luck.

Alessandro
  • 39
  • 1
1

Here is an new solution,hope it can help you. Solution

 //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());
}
Bella He
  • 33
  • 7
0

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

  2. Do you mind sharing your plugin?

ochakov
  • 348
  • 4
  • 7
0

This is quite old but since I still needed it in 2019 someone else might need it as well.

In case for some reason you do not want (or can't) integrate a whole plugin for a single functionality, here is the usePreferredTextZoom(false) functionality extracted (it's from a MobileFirst 7.1 app, based on Cordova). All credit goes to the guys developing the plugin, of course.

Within the main Java file of your Cordova Android app change the onInitWebFrameworkComplete method by adding the preventDeviceZoomChange() method call:

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();
    }
}
Tom
  • 92
  • 13