The other day I was making a random demo app in Vue where I wanted to get the user's machine information (not for snooping) but to display the basic information like the Operating System (OS) name with version etc.

I had to confess I was so bad at this that I almost immediately revoked the idea to do such a thing. But now I think if not on Vue, I need to do this with vanilla JS.

Taking this move further, I decided to dynamically add or delete DOM elements after detecting the OS. Though not this, we'll definitely learn how to detect the OS on both web and mobile.

Detecting desktop OS (Windows/Mac/Linux)

First, let's detect whether the client's machine is running an OS that seriously needs to ramp up its application store (Windows) or the one which almost all programmers and hackers love the most (Linux) or the OS which can exclusively run XCode (Mac).

This can simply be achieved by analyzing the value of navigator.appVersion of the window object. This one simple thing can do many things. Not only it will tell you about the current device OS (we'll see more about this below), but also, it can be used to get the version information about the browser it's currently running on.

Let's declare detectedOS as a variable in JS which holds the String information regarding the OS type. Next, we'll make three if checks (switch can work too).

// default value just in case if nothing is detected
var detectedOS = "Unknown OS"; 

Inside the first check, let's use the navigator.appVersion to get the index of the three major OS platforms: Win (Windows), Mac (MacOS), and Linux.

if (navigator.appVersion.indexOf("Mac") != -1) 
    detectedOS = "MacOS";

Here, we check if the index value is not equal to 1, then we set our variable value to "MacOS".

Similarly, we can perform the same check for the other two OS:

var detectedOS = "Unknown OS";

if (navigator.appVersion.indexOf("Mac") != -1) 
    detectedOS = "MacOS";

if (navigator.appVersion.indexOf("Win") != -1) 
    detectedOS = "Windows";

if (navigator.appVersion.indexOf("Linux") != -1) 
    detectedOS = "Linux";

Okay, all cool but how to display the user that a specific OS has been detected? There are multiple ways to do this. One good way would be:

Adding an alert() which says "Device OS is: " when a button is clicked.

var detectOS = "Unknown OS";

if (navigator.appVersion.indexOf("Win") != -1) 
    detectOS = "Windows";

if (navigator.appVersion.indexOf("Mac") != -1) 
    detectOS = "MacOS";

if (navigator.appVersion.indexOf("Linux") != -1) 
    detectOS = "Linux";

document.querySelector('button').addEventListener('click', detect);

function detect() {
   alert(`Device OS is: ${detectOS}`)
}

This is how it looks on Mac:

On Windows:

And on Linux:

Detecting mobile OS (Android/iOS)

With the current code, if you try to run it on mobile (via CodePen), you'll see the following alert:

While it's true that Android is based on a modified version of Linux, it's not entirely a Linux OS. So how do we make sure that "Android" is detected here instead of "Linux"?

This is explained by a Stackoverflow user Vladyslav Turak in the following answer:

answer re: Detect MacOS, iOS, Windows, Android and Linux OS with JS

Jul 7 '16

215

I learnt a lot about window.navigator object and its properties: platform, appVersion and userAgent. To my mind, it's almost impossible to detect user's OS with 100% sure, but in my case 85%-90% was enough for me.

So, after examining tons of Stack Overflow answers and some articles, I…

Open Full Answer

function getOS() {
  var userAgent = window.navigator.userAgent,
      platform = window.navigator.platform,
      macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
      windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
      iosPlatforms = ['iPhone', 'iPad', 'iPod'],
      os = null;

  if (macosPlatforms.indexOf(platform) !== -1) {
    os = 'Mac OS';
  } else if (iosPlatforms.indexOf(platform) !== -1) {
    os = 'iOS';
  } else if (windowsPlatforms.indexOf(platform) !== -1) {
    os = 'Windows';
  } else if (/Android/.test(userAgent)) {
    os = 'Android';
  } else if (!os && /Linux/.test(platform)) {
    os = 'Linux';
  }

  return os;
}

alert(getOS());

As you can see, we are using the same if statement checks as before, but for Android, we are testing /Android/.test with the navigator.userAgent.

This is quite a nice workaround and upon running it on my Android phone, here is the result:

I don't have an iOS device to check for that device. You can do so and let me know below in the comments.

Note that the guy who gave the answer to this has clearly stated that:

This code works properly. I tested it on all the OS: MacOS, iOS, Android, Windows and UNIX, but I can't guarantee 100% sure.

Thanks for reading, I appreciate it! Have a good day. (✿◕‿◕✿)

Debugging can be tough 😂
.#coding #developer #webdevelopment #iosdevelopment #javadevelopment #java #python #ruby #php #html #javascript #codingmeme #codingjoke #developerhumor #devhumor #devhumour #programmerhumor #programmingmeme #programmingjoke #devlife #webdesign pic.twitter.com/UtkN6iuRBG

— Coding Interview Coach (@CoachCoding) August 28, 2020

📫 Subscribe to my weekly developer newsletter 📫

PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, here's my Medium profile.