I am working on small cordova mobile application ,so i have been using Monaca and Onsen UI because they are very useful and helpful for such things
The problem i got that when i run the app in my phone i get very small fonts because i am using tiny fonts in my phone but when i set it to medium or small they app looks well
The question is :how can i prevent my app from using the default system font-size
I even added the Mobile Accessibility plugin but it seems that Monaca does not support it yet
First Option:
HERE is a library for Cordova that will allow you to ignore the user's device defaults for text scaling, screen reading and color-inversion.
You would then implement via:
if($window.MobileAccessibility){
$window.MobileAccessibility.usePreferredTextZoom(false);//Dont Scale Text
}
This works with Ionic framework, and seeing as it is a Cordova libriary it should work with Monaca as well.
This implementation should be used AFTER Cordova deviceready call.
Second Option:
While in normal Android Development, to account for this issue a Developer would use DP for UI Elements, however in a HTML/CSS built app we don;t have access to this.
You would instead target CSS properties:
vw: 1/100th viewport width
vh: 1/100th viewport height
vmin: 1/100th of the smallest side
vmax: 1/100th of the largest side
Drawbacks include: Doesn't work in Opera or on iOS devices properly.
Also note: The reason for this behavior is that devices and apps are meant to be weaved together according to proper UI/UX design. This meaning any user set device UI/UX settings should also be carried into any apps they use.
While true, it is common for these rules to be ignored as long as intentional UX/UI purpose is present and the design is not solely used to look "pretty".
Keep in mind, many other options may be available dependent on need/use