Please note; I pretty much only develop for PAN (Plain Awesome NativeScript), not NG2 (Angular) – but the concepts should work.
Well the way I do it is two fold; depending on what is needed I may only use one template the main
login.xml file if the look is just going to scale up to the device, or I use two files, the plain
login.xml (phones) and
login.minWH600.xml (tablets) on the screens where the look is going to be different on a tablet vs phone.
The way I make it scale properly is I use CSS and a couple plugins;
First is a open source;
nativescript-platform-css - This allows me to have css that is like this:
.android600 and the different standard sizes all the way from 320 to 1024. This allows me to tweak thinks for certain displays in my CSS file.
The second plugin I use is commercial
nativescript-scaledFonts - this plugin takes care of scaling the fonts for the display. It offers several choice; a single scaling range or two scaling ranges (phone & tablet). This allows you when you set your font to be 14 point on a 360 wide screen it will automatically scale to 12.5 on a 320 wide screen and 26 on a 600 wide screen. I don’t have to maintain any “extra” font size css for all the different sizes of screens, this helps eliminate one of the places where I was having to maintain a LOT of different css… You can just use the first plugin and put in a font size for every single element for every single size display; but for me personally; that is way too much work.
My testing I typically start with a standard sized phone on Geny, then after I have everything looking great and running great on it; I switch to a couple other size phones, then a couple different sizes tablet, so my Geny has 6+ images. Typically those images also are Android 4.4.4, 5, 6 and soon 7. This allows me to make sure the app looks good on all the major Android platforms. After I have it working really well on android I move over to iOS and do the same things. Typically after making the app look good on android there is only a couple
.ios overrides and I’m done.