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

ionic-v1
1

The topic name says it all.

How do I use platform-ios, platform-android, and platform-cordova css classes?

Thanks

2

Say you wanted a green header on iOS and a blue one and android, and a red on when testing on chrome, you could use those classes.

.platform-ios . bar-custom{
  background: green;
}

.platform-android . bar-custom{
  background: blue;
}

.platform-browser . bar-custom{
  background: red;
}

This is just a quick way with cordova’s device plugin to differentiate between platforms and style things differently, such as having the base font be helvetica on iOS and roboto on android. Hope this helps.

11 Likes
3

@mhartington thanx for your answer!..

And how to specify a custom class exclusively for iOS 7?

1 Like
4

You would just use .platform-ios7 . But keep in mind, in the nightly builds, this has been changed to just .platform-ios, since apple requires all app to be made for iOS 7, so there is no need to target anything below that (iOS 6 and iOS 5)

5

understood!.. thank you!

6

Is there a way to set this class dynamically at run time?

7

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

8

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

9

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
10

Thanks a lot!

Keep up the awesome job!

11

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.

12

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!

13

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
14

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

2 Likes
15

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?

16

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

17

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

18

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.

19

Thanks a lot, will try them out :slight_smile:

20

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