Platform Classes

Ionic automagically adds classes to the <body> of your project based on the device you are using to view the project. This means if you are viewing your app on an iOS device, the <body> will have the platform-ios class applied. Some information about the different classes can be found below.

Platform Device Classes

ionic.Platform is used to retrieve the device information and apply classes to the <body> of the project. These classes are used by the Ionic SDK to give the project a platform specific look and feel, and can be used by you to override styles.

Platform	Class	Description
Browser	`platform-browser`	Whether the application is running on the Desktop Browser - applied if you are running `ionic serve`
Cordova	`platform-cordova`	Whether the application is running on the device, as the device uses Cordova to display the application
Webview	`platform-webview`	Whether the application is running within a webview on the device within a native application
iOS	`platform-ios`	The device is iOS; therefore, the "look and feel" will be given the iOS treatment
iPad	`platform-ipad`	iOS device is an iPad - this class is applied, in addition to `platform-ios`
Android	`platform-android`	The device is Android; therefore, the "look and feel" will be given the Android treatment
Windows Phone	`platform-windowsphone`	The device is Windows Phone; therefore, the "look and feel" will be given the Windows Phone treatment

Platform OS Version Classes

Ionic also adds classes based on the OS version. This can be used to customize your project for a specific OS version. A class is added for the major version and the major + minor versions.

The class is created by looking at the User Agent of the OS version. The major + minor class is created by replacing the . separating the major and minor version numbers with a _. So, if you are running your project on a device running iOS 8.4, it will add the platform-ios8 and platform-ios8_4 classes. Below are some example classes, but you are not limited to these.

Platform OS Version	Class	Description
iOS 8	`platform-ios8`	The OS on the device is running iOS 8
iOS 8.4	`platform-ios8_4`	The OS on the device is running iOS 8.4. This class is applied in addition to `platform-ios8`
Android 4	`platform-android4`	The OS on the device is running Android 4
Android 4.4	`platform-android4_4`	The OS on the device is running Android 4.4. This class is applied, in addition to `platform-android4`

Using Platform Classes to Override Styling

You can use any of the above classes to override Ionic styling. For example, if you wanted to override the header title on Android to be uppercase, you could use the following code:

.platform-android .bar-header {
  text-transform: uppercase;  
}

This would uppercase the title for Android, but any other device would remain lowercase.

You could even go as far as customizing the side menu style based on the platform. The possibilities are endless!