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

Question

I came across a rare situation (though it's understandable given different behaviours between even Android and iOS) where I wanted to use a different style specifically for iOS in a Cordova app I am developing on the Ionic-framework.

I wondered the best way to isolate my selectors based on platform? Basically I wondered how I could insert a class into the body tag of every page in my app identifying the platform.

My initial options were I could use the CordovaDeviceModule and return the platform via a custom directive or ng-class. But is this a bit heavy handed, does ionic provide a cleaner way to identify the platform?

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

Answer 1

So it turns out ionic have platform classes baked into the body class already, nice and easy.

All I had to do was select on

.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 haven't been able to find a clear list of the available body platform selectors documented, 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 refers to device grade as discussed here: http://ionicframework.com/docs/api/utility/ionic.Platform/