Nativescript-ui-feedback: Scaled text for tablets and ipads.

[adnanaliarshad]

I have created an app with native script which is working fine on both android and ios devices according to design but on tablets font sizes looks small so is there a way in nativescript to scale fonts in bigger screen devices?
e.g 18 font looks good on s7 but on android tablets it looks small. So is there a way to scale such fonts rather than writing separate css classes for tablets?

My Package.json:

"description": "NativeScript Application", "license": "SEE LICENSE IN <your-license-filename>", "readme": "NativeScript Application", "repository": "<fill-your-repository-here>", "nativescript": { "id": "au.com.dapperapps.app", "tns-android": { "version": "2.5.0" } }, "dependencies": { "@angular/common": "2.4.3", "@angular/compiler": "2.4.3", "@angular/core": "2.4.3", "@angular/forms": "2.4.3", "@angular/http": "2.4.3", "@angular/platform-browser": "2.4.3", "@angular/platform-browser-dynamic": "2.4.3", "@angular/router": "3.4.3", "moment": "^2.17.1", "nativescript-angular": "1.4.0", "nativescript-couchbase": "^1.0.17", "nativescript-exit": "^1.0.0", "nativescript-iqkeyboardmanager": "^1.0.1", "nativescript-stringformat": "^2.3.4", "nativescript-telerik-ui": "^3.0.0-2017.3.27.1", "nativescript-theme-core": "1.0.2", "reflect-metadata": "~0.1.8", "rxjs": "~5.0.1", "tns-core-modules": "2.5.1" }, "devDependencies": { "babel-traverse": "6.18.0", "babel-types": "6.18.0", "babylon": "6.13.1", "lazy": "1.0.11", "nativescript-angular": "^1.4.0", "nativescript-dev-typescript": "^0.3.5", "typescript": "~2.1.0", "zone.js": "^0.7.2" } }

[dapperapps]

+1

[NathanaelA]

There is two ways to do this; and I actually use both in my apps.

1. I have an open source plugin called NativeScript-Platform-css; this adds some additional css classes to the system. You will now have:
   .ios, .ios360, .ios1024, .android, .androidX, etc... -- With this specific classes you can manually adjust the text for each of the major sizes. This works for smaller screens, or the few items you might want to adjust -- but it does take time as you have to make rules for all 5 or 6 ios platform sizes, and the same for the groups of android sizes. I normally use this to adjust images or do some other non-text adjustments, so I might have about several of these types of rules in a complicated screen.

1. I have a commercial plugin call NativeScript-scaledFonts... If you can't guess; it basically allows you to set your base scale (defaults to 320 dpi). So after you make your app look great on a iPhone 4s or Android (small phone). And then "it" magically adjusts the fonts based on the screen size. It supports a lot of options to help deal with fonts, and between these two plugins I can make a screen look exactly how I want it to on any device; using one xml file; and one css file.... With very few css rules...

Please note; I have not tested ANY of my plugins under NAN (NativeScript Angular) . --- So I have NO idea if it is compatibility with NAN apps, I do know it is compatible with PAN (Plain Awesome NativeScript) apps.

P.S. MY opensource NativeScript-orientation plugin also works hand in hand with these two plugins if you need to deal with screen rotation and screen adjustments...

[dapperapps]

@NathanaelA you have attached APK file in your opensource plugin link

[NathanaelA]

Thanks, fixed. Copy/Paste; apparently didn't COPY... ;-D