Nativescript screen size qualifiers not xml but css

Question

How can I make screen size qualifiers for CSS files. Like app.css but for certain screen size like 10" tablets. If it's possible, can I also make Android specific like app.minWH720.android.css. It seems not to work, am I doing something wrong or is only xml supported.

I want to archive different label sizes on different devices. XML file are fine without touching them.

I'm aware of documentations like: https://www.nativescript.org/blog/details/supporting-multiple-screen-resolutions-in-your-nativescript-app

Answer 1

Considering that you have screen qualifers pages like

main-page.minWH720.xml
main-page.minWH480.xml

You can simply provide different CSS classes for your XML elements.

.myButton-minWH720 {
   background-color: red
}

.myButton-minWH480 {
   background-color: blue
}

And use them accordingly where needed..

As for the second question you can get your metrics using the platform module like this in your app.js

var platform = require("platform");

var screen = platform.screen;

console.log(screen.mainScreen.heightDIPs);
console.log(screen.mainScreen.heightPixels);
console.log(screen.mainScreen.scale);
console.log(screen.mainScreen.widthDIPs);
console.log(screen.mainScreen.widthPixels);

var device = platform.device;

console.log(device.os);
console.log(device.manufacturer);
console.log(device.osVersion);
console.log(device.model);
console.log(device.sdkVersion);
console.log(device.deviceType);
console.log(device.uuid);
console.log(device.language);
console.log(device.region);