How to load different CSS files based on the Platform (Android and IOS)

How can i load different css files based on the platform and can i determine the platform based on media queries in CSS.

Look at the Cordova docs for ideas about using different files per platform. You might also want to consider a task runner like Grunt or Gulp to do things based on command line params.

Ionic has some platform specific CSS like :

  • .platform-ios7
  • .platform-cordova
  • .fullscreen
  • .grade-a through c
  • .platform-android

You can go through the CSS to find them. They get applied to various components based on platform.

That and if you need some generic, platform based css, there is the merges folder in the project structure.

The merges folder will have 2 sub folders in it, iOS and Android. The prepare/build process will inject any file you have in those directories into their respected platforms

This is how I load different css files based on platform in index.html file

    <!-- Load platform specific styles -->
      // Utilize Ionic’s methods for determining platform
      if (ionic.Platform.isAndroid()) {
        // Android styles
        document.write('<link href="css/"  rel="stylesheet">');
      } else if (ionic.Platform.isIOS()) {
       // iOS Styles
       document.write('<link href="css/" rel="stylesheet">');
      } else {
       // Browser development styles (use Android)
       document.write('<link href="css/"  rel="stylesheet">');

you can put this code bellow:

<link href="css/" rel="stylesheet">

1 Like

@zarcode How do you do this now? I get the following error:

ionic is not defined

I want to be able to set the ios/android/browser key (xxx) for google maps, in index.html:

<script src=';key=xxx'></script>


How did you accomplish this?
I want to add different api keys for google map for different devices (ios/android) in index.html just like you

Thank you.