How to write styles properly for different devices?

ios

#1

Hi All,

While developing my application I am using iphone 5s simulator but when I change the simulator to iphone 6 or iphone 7 I am getting some styling issues(padding, alignment…). How can I resolve this ???

Any suggestions !!

Thanks.


#2

Platform specific(Android / iOS) css file, only apply the appropriate. You can do the same with myPage.land.css and myPage.port.css. In the End, you can style based on screen size with a slightly more advanced file naming convention
https://docs.nativescript.org/ui/supporting-multiple-screens#screen-size-qualifiers
https://docs.nativescript.org/cookbook/platform


#3

Thanks for the reply @pap5508,
I have tried ‘page.ios.minW326.css’ for iphone 6 and higher devices and its working fine.
but when I am importing styles from ‘page.ios.css’ to ‘page.ios.minW326.css’ its not working, instead I have tried to import from ‘page.css’ its working.I am not understanding this behaviour.

Example:
page : page.ios.minW326
@import(‘page.ios.css’) ////Not working

page : page.ios.minW326
@import(‘page.css’) ////Working


#4

Platform suffixes are removed when preparing the project. Therefore you only end up with page.css in the application.


#5

I got around this by creating all the platform specific styles in their respective files, and then creating a page-common.css file with the generic styles and importing that file into the platform files. This way you get all the styles you need. Makes sense?


#6

Hi Jen, Can you give an example for that. I’m developing for all different screen for iphone and android and I’m looking for the best practices I need to follow to achieve the goal

Thanks


#7

I think the best examples are here https://docs.nativescript.org/ui/supporting-multiple-screens

My comment had more to do with myStyles.ios.css and myStyles.android.css being imported into page-common.css - which I think isn’t your issue.

best,
Jen