change CSS according to OS in angularjs

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 :)

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

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.

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