How to use platform-ios and platform-cordova css classes?

You can, if you use ionic.platform

http://ionicframework.com/docs/api/utility/ionic.Platform/

But I wouldn’t recommend it, as there are alot of css things going on to make sure each platform and platform grade gets the best performance

Is there something similar for Device? e.g. .device-IPad I could not get this to work, so I dont think so

Yup, there is

var iPad = ionic.Platform.isIPad();

if (iPad === true){
  // Some logic here
}

If this doesn’t work for some reason, you can always use the default methods provided by cordova’s device plugin

http://plugins.cordova.io/#/package/org.apache.cordova.device

1 Like

Thanks a lot!

Keep up the awesome job!

Thanks, I’m familiar with that way of doing it, but was hoping for CSS classes so I don’t have to manipulate the DOM in JS.

Is there any specific way to do that for specific android versions? I’m getting the os version at runtime, but want to target certain versions for certain class.

The way i’m doing currently is:

HTML:

 <body ng-class="{'has-translucent-status-bar' : window.screen.height === window.innerHeight}">
<ion-nav-view ></ion-nav-view>
</body>

and in CSS:

.platform-android.has-translucent-status-bar .header-title{
    height: 80px;
    padding-top: 40px;
 }

I’ve been trying to target specific android versions only… (let’s say android 5.0 +). Any suggestions? Thanks!

So each version of android will get a class applied to them, so you could do something like this

.platform-android4_1 {
 /*Any styles for android 4.1*/
}
.platform-android4_3 {
 /*Any styles for android 4.3*/
}


.platform-android4_4 {
 /*Any styles for android 4.4*/
}


.platform-android5_0 {
 /*Any styles for android 5.0*/
}
2 Likes

Thank you very much. That was exactly what I was looking for. I should implement it soon. :smiley:

2 Likes

That doesn’t work for me.
I have this but it doesn’t work on the Ionic View App.
In the normal Webbrowser it does.

body.platform-ios ion-modal-view ion-content.tab-content {
    padding-top: 90px !important;
}

body.platform-ios ion-content.tab-content {
    padding-top: 45px !important;
}

Can someone help me?

It’s probably an issue with loading the app in ionic-view. Once installed on a real device, there shouldn’t be any issues

Can I use Modernizr with Ionic 1.x for feature detection?

Sure, there’s nothing stopping you. Though I think that is a bit overkill for what you need.
You can get by using the platform grades instead.

Thanks a lot, will try them out :slight_smile:

Hi, I’m trying with

.platform-android .content-profile {
        top: 0px;
        background-color: white;
      }

.platform-ios .content-profile {
      top: 0px;
      background-color: green;
      padding: 30px;
    }

But on ionic serve --lab doesn’t appear differences between platforms. What would be wrong? (ionic2)

1 Like

Hi mhartington, I want to apply css for desktop browser, how can I do that?

hello, everyone. is there in ionic a certain CSS code that you can implement and it adapts all design for all android and ios devices.
I am new to ionic development

Hi, did you find any solution to your problem as I am facing the same issue and the main comment by @mhartington is not working for me(not even in browser or in ionic lab) .

Thanks!

1 Like

Worked for me.

Please, make sure that is using the corrects css selectors, i made a mistake and not worked at first time, like this:

.platform-ios page-home {
super-tabs-container { top: 48px; }
}

You can see the docs in this page:

https://ionicframework.com/docs/v1/platform-customization/platform-classes.html

Hi @mhartington this is not working in Ionic 5
Is there any options for adding styles for ios and android platforms