Easy Css Setup for Tablet and Phone NativeScript

July 12, 2016
I recently had to modify my app to support tablets so I thought I'd share a super easy way I found to add custom styling.  So I mean the app works on tablet but the UI is just stretched, not really optimizing the space.

So lets assume this setup (omitting JS since it doesn't apply)
- main.xml
- main.css

So lets add our custom tablet layout.  Just copy\paste main.xml and rename to:
- main.minWH600.xml

So NativeScript is smart enough to know which XML file to load based on the naming convention... all the other files (JS\CSS) load as normal; so we're still loading main.css.

If you create a new file named main.minWH600.css then like the XML it'd load that one.  The problem I've found is there's a lot of shared styling between the two so I don't love having an entirely separate file.

So here's the solution I came up with...
Open your main.minWH600.xml file and on the root node, add\append a class name like .tablet



So now in your CSS you can target with a heavier selector, no need to have multiple files!


Image Description

Steve McNiven-Scott

Best\Only Blogger on this site. Therefore defacto blogger of the year Award Winner.