0

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

Neji Soltani
  • 1,522
  • 4
  • 22
  • 41
  • 2
    Monaca supports all Cordova / Phonegap plugins. You have to have a paid developers account to include them in your project. Fonts, in a hybrid applications, are controlled by CSS. Assign a class to your text and control it that way. – Munsterlander Nov 28 '16 at 23:38
  • Thanks @Munsterlander I know that but i am still beginner and i cant pay for those services yet , and i know well that i can control everything using css but there's problem each time i change the font style for example if i set a text to 50px it will not look the same in an other device (same screen but different resolution) – Neji Soltani Nov 28 '16 at 23:43
  • Check out this post: http://stackoverflow.com/questions/25768602/maintain-aspect-ratio-and-font-size-based-on-browser-height-and-width – Munsterlander Nov 28 '16 at 23:46
  • Sorry that didn't work the font size keep changing – Neji Soltani Nov 29 '16 at 00:36

1 Answers1

2

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

NSTuttle
  • 3,237
  • 2
  • 17
  • 26