How to write styles properly for different devices?



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 !!



Platform specific(Android / iOS) css file, only apply the appropriate. You can do the same with and myPage.port.css. In the End, you can style based on screen size with a slightly more advanced file naming convention


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.

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

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


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


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?


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



I think the best examples are here

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