nativescript-multiple-screen-css

A NativeScript plugin to deal with multiple screen sizes and device orientation

Installation

From the command prompt go to your app's root folder and execute:

tns plugin add nativescript-multiple-screen-css

What does it do?

It automatically adds the classes to the current Page's cssClass variable:

'android' or 'ios' or 'windows'
'portrait' or 'landscape'
'wXXX' where XXX is the matched size from the sizeGroupW
'hXXX' where XXX is the matched size from the sizeGroupH
'swXXX' where XXX is the matched size from the sizeGroupSW

Usage

To use the module you just require() it:

require( 'nativescript-multiple-screen-css' );

Notice: You do NOT need to keep a reference to it; and you only need to load it once. You can add it to your app.js file and forget about it.

It will automatically attach its methods to all the proper classes in the NativeScript library making it act as if they are built in.

How does this help?

Plain Awesome NativeScript (PAN)

StackLayout {
  background-color: red;
}

.android StackLayout {
  background-color: green;
}

NativeScript Angular (NAN)

StackLayout {
  background-color: red;
}

.android :host StackLayout {
  background-color: green;
}

So on ios and windows the background would be red, on a android the color is green. Please note, in Angular you MUST prefix the rule with /deep/ or preferably :host for it to work correctly!

Why use this?

You can set all the normal CSS values this way include width, height, font-size. This allows you to differentiate your UI based on current screen width or height or smallest width (sw).

Size groups

The plugin will create .wXXX and .hXXX where XXX is the DPI of the screen. The plugin comes with default size groups [1280, 1024, 800, 600, 540, 480, 400, 360, 320], and you can configure your own size groups for both .wXXX, .hXXX and .swXXX by calling:

var multipleScreenCss require( 'nativescript-multiple-screen-css' );
multipleScreenCss.sizeGroupingsW([size1,size2,size3,...]);// For .wXXX classes
multipleScreenCss.sizeGroupingsH([size1,size2,size3,...]);// For .hXXX classes
multipleScreenCss.sizeGroupingsSW([size1,size2,size3,...]);// For .swXXX classes

The way size group css classes is determined is that if the screen height is 960dpi and width 600dpi, it would then get the class .h800 because it is bigger than 800 and smaller than 1024, and class .w600 because it is exactly 600, and class .sw600 because that is the smallest possible width no matter the rotation.

So it sets five separate css classes on startup of each page; you can use any (or all) of them to use as css rules.

• .android | .ios | .windows
• .wXXX
• .hXXX
• .swXXX
• .portrait | .landscape

Please note these are calculated each page load.

Demo

The demo will show you the css class names it generated.

License

This software is available under the MIT license.