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!