Device specific styles for ios iphone 6


#1

Hi all,

I would like to write separate styles for iphone 6 and higher. how can I do that in vanilla NS ???
I tried page.ios.minW1080.css but didn’t work. any suggestion ??


#2

Hey @sagar1911,

There’s not going to be an easy way to do this. You can get some information about the device using NativeScript’s device module (see https://docs.nativescript.org/cookbook/platform), but you can’t get a device’s model number currently.

To take a step back, what is your use case for needing to detect an iPhone 6 or higher, as there might be some other way to accomplish this.


#3

Hi tjvantoll,

I am having the same issue and was looking into a similar solution as the person who posted the question. Just out of interest, what are the other ways of achieving device specific styles in nativescript?


#4

Hi @jessiPP,

There are a few different things you can do with NativeScript’s CSS implementation. For example you can create a myPage.ios.css and myPage.android.css file, and NativeScript knows to only apply the appropriate one based on whether the app is running on iOS or Android. You can do the same sort of thing with myPage.land.css and myPage.port.css for landscape and portrait mode. Finally, 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.


#5

HI again,

I have tried screen size qualifiers but it does not work. I have two files login-page.minWH480.xml and login-page.minWH720.xml. I have and respectively placed in each file but I get a error which says: Failed to load Page from entry.moduleName: login/login-page. The ‘login/login-page’ is what I had placed is the app.js file as the starter page for the app, without the file size conventions. What am I doing wrong?


#6

Ok, I was using the wrong dpi size in my naming convention now. Now the issue is that whatever changes I make to the associated js file, it is not registered in the app. Its almost as if the file is not been seen even though the cli says it was saved.


#7

I decided to create a new project and swap over the files in the new project. It worked fine just as expected.