CraZyDroiD CraZyDroiD - 6 months ago 28
AngularJS Question

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

Answer

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