How to ignore font-size setting changes for Cordova App when runs on Android 4.4+?

Vicente Tentativa picture Vicente Tentativa · Oct 13, 2014 · Viewed 7.3k times · Source

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.

Answer

Anuj.T picture Anuj.T · Mar 11, 2015

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. :) :) :)