How to isolate specific platforms using CSS selectors in the Ionic framework

Question

I came across a rare situation (although this is understandable, given the different types of behavior between Android and iOS), where I wanted to use a different style specifically for iOS in the Cordova application that I am developing on the Ionic-framework.

I wondered how best to isolate my selectors on the platform? I basically wondered how I can insert a class into the body tag of each page in my platform-specific application.

My initial parameters: I could use the CordovaDeviceModule and return the platform through a custom directive or ng class. But it's a little heavy, but does ion provide a cleaner way to identify the platform?

I am running Ionic, v1.0.0-beta.13

Answer 1

It turns out that the ionic classes of the platform, baked in the body class, are already glorious and light.

I could only choose

.platform-ios { } 

here is an article with more

http://forum.ionicframework.com/t/how-to-use-platform-ios-and-platform-cordova-css-classes/5898

I still have not been able to find a clear list of available body platform selectors, but here is what I have found so far.

 .platform-ios .platform-cordova .platform-ipad .platform-browser .platform-linux .platform-android .platform-android4_2 .platform-c .platform-macintel .platform-ios8 .platform-ios8_1 .platform-webview 

I think platform-c belongs to the device class as described here: http://ionicframework.com/docs/api/utility/ionic.Platform/