How to make CSS working with multiple device in angular

nativescriptrocks
plugins

#1

I’m using nativescript with angular

i need to make my css file working with multiple devices sizes and with landscape

i try this but it does not work

i create 2 file ‘account.login.land.css’ & account.login.port.css’
and i call it in component like this

@Component({
selector: “hp-login”,
moduleId: module.id,
providers:[navigationsService],
templateUrl: “account.login.html”,
styleUrls:[‘account.login.land.css’,‘account.login.port.css’]

})

put it does not work correctly

how can i do it


#2

In your constructor method you can do something like this:

import { Orientation } from "nativescript-orientation";
import { DeviceOrientation } from "ui/enums";
...

constructor(private page: Page) {
    this.isLandscape = DeviceOrientation.landscape === Orientation.getOrientation());

    this.page.addCssFile((this.isLandscape) ? "~/pages/login/login.component.land.css" : "~/pages/login/login.component.port.css");

}

Make sure you install nativescript-orientation plugin, I am not sure if it will work but its a good start.

Another solution is described in the nativescript-orientation plugin where you can handle the orientation change very easily. This post also talks about it: https://www.nativescript.org/blog/handling-changes-in-orientation-in-your-nativescript-app

Good luck!