How does Ionic adds classes to the body tag?


#1

I just realized that on iOS 7 (running app from Xcode into device), Ionic add some classes to the <body> tag, as one can see on this screenshot.

In this case it adds .platform-ios7.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) which seems to be what’s responsible for adding that extra space on top of the header bar to accommodate the iOS 7 Status Bar.

I wonder- how is it done?

Because I followed another sample tutorial (Tabs App), on which that doesn’t happen and the iOS Status bar overlaps the header.

Thanks a lot.


#2

Ionic check what device your on by using cordova’s device plugin. From there, they add classes to the body to apply device specific classes and styling.

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


#3

Thanks!

I solved the Status Bar issue by setting <script src="cordova.js"></script> to be the last script to load.