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

ionic-v1
1

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

2

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.

3

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

4

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

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

you can put this code bellow:

<link href="css/ionic.app.css" rel="stylesheet">

5

@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='http://maps.google.com/maps/api/js?v=3.33&;key=xxx'></script>

6

@compo

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.