change CSS according to OS in angularjs

Question

I'm working a mobile application using angularjs and ionic framework.My application is for both android and ios devices. But i need two different CSS styles for ios and android devices. Is there a way to detect the OS and change the CSS accordingly.

I found a question in stackoverflow similar to this.But i'm not sure if this is the way to do this.

Detect device and swap the CSS file - jQuery

Can i have a step by step instructions on how to do this? Thanks in advance :)

since you use ionic, you just use ngCordova lib develop by the same person/team. http://ngcordova.com/docs/#Device — wayne, Oct 16 '14 at 03:42
how can i use this to change the CSS file.please explain since i'm new to programming — CraZyDroiD, Oct 16 '14 at 03:52
As you're building an app I would make that part of the build process. I'm not familiar enough but I would think there would be a way to swap out css files when you do an `ionic build android` for instance. There is something to be said for a unified experience across devices though so you may want to rethink that: http://forum.ionicframework.com/t/separate-css-for-android-and-ios/1639. You could always keep an 'iphone.css' and 'android.css' file and just replace your generic 'site.css' file with the appropriate one for your device when building too. — Jason Goemaat, Oct 16 '14 at 20:14

score 1 · Accepted Answer · answered Oct 16 '14 at 05:41

Here's a solution that you might be looking for. Just use this code

// This script sets OSName variable as follows:
// "Windows"    for all versions of Windows
// "MacOS"      for all versions of Macintosh OS
// "Linux"      for all versions of Linux
// "UNIX"       for all other UNIX flavors 
// "Unknown OS" indicates failure to detect the OS

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

if (OSName == "Windows"){$(document.body).append("<link rel='stylesheet' type='text/css' href='this.css'>")}

// etc...

Reference

You can also use userAgent too

score 1 · Answer 2 · answered Jun 07 '16 at 08:26

Ionic has methods to detect devices ionic.Platform.isAndroid() , ionic.Platform.isIOS().

You can load device specific styles by using this code in your index.html:

`

  <!-- 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>

`

score 0 · Answer 3 · answered Oct 16 '14 at 04:13

0

Use the Device plugin.

http://docs.phonegap.com/en/3.0.0/cordova_device_device.md.html

You then get access to the OS with var thisDevice = device.platform and you can use a selector (like an if/else statement) to load a different stylesheet.

answered Oct 16 '14 at 04:13

Subjective Effect

1,465
2
17
37

I'm sorry i don't understand this.can you explain me what to do – CraZyDroiD Oct 16 '14 at 04:29
Read that linked document. – Subjective Effect Oct 16 '14 at 06:37
Read that linked document. – Subjective Effect Oct 16 '14 at 06:37

score 0 · Answer 4 · edited May 23 '17 at 11:46

Overall guide says

no - changing appearance based on device detection is not considered very good coding practice anymore.
yes - changing appearance based on detection of device capabilities is good coding practice.

See HTML Goodies: Targeting Specific Devices in your Style Sheets and especially Modernizr: the feature detection library for HTML5/CSS3 for further discussion.

However, if device detection makes things simpler for you and brings more usability to the end user then read HTML5ROCKS: A non-responsive approach to building cross-device webapps for list of options and pros/cons.

If you still want to go the way of client-side device detection then article Stack Overflow: Add a CSS stylesheet only for iOS devices contains sort of "step by step" 1 concrete coding example

change CSS according to OS in angularjs

4 Answers4