Detecting the Operating System

The application-version object navigator.platform (Figure 13.1) identifies the operating system of the browser used to view the site, although it's embedded in a string of other information (Figures 13.2 and 13.3). This information can be very useful, especially if you need to overcome font-size inconsistencies, or other OS-related incompatibilities.

Figure 13.1. The general syntax for the platform object.

Figure 13.2. The code is being run in Windows.

Figure 13.3. The same code is being run on a Mac.

To detect the operating system being used:

var isMac = 0;

Set up four variables (isMac, isWin, isOtherOS, isUndetected) in your JavaScript to record which OS the browser is using. Each of these variables is initially set to 0 (false) and will be reassigned to 1 (true) if the designated operating system is detected (Code 13.1).

Code 13.1. This code first writes the complete `appName` and `appVersion` on the page. It then uses that information to determine the operating system so that it can display the correct message.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS, DHTML &amp; Ajax | Detecting the Operating System</title> </head> <head> </head> <body onload="detectOS()"> <script type="text/javascript"> <!-- var isMac = 0; var isWin = 0; var isOtherOS = 0; var isUndetected = 0; var agent = navigator.platform.toLowerCase(); if (agent.indexOf('mac') != -1) isMac = 1; else if (agent.indexOf('win') != -1) isWin = 1; else if (      agent.indexOf('unix') != -1 ||      agent.indexOf('sunos') != -1 ||      agent.indexOf('bsd') != -1 ||      agent.indexOf('x11') != -1 ||      agent.indexOf('linux') != -1) isOtherOS = 1; else ( isUndetected = 1 ) document.write('<b>This browser\'s designation is:</b> '); document.write(navigator.platform + '<br />'); if (isMac) { document.write('This Browser is running in the Mac OS.'); } else if (isWin) { document.write('This Browser is running in the Microsoft Windows OS.'); } else if (isOtherOS) { document.write('RESISTANCE IS FUTILE...YOU WILL BE ASSIMULATED'); } else { document.write('Sorry, I\'m not sure what OS you are using.'); } //--> </script> </body></html>

var agent = navigator.platform. toLowerCase();

Add the variable agent, which records the value of the navigator.platform object (the name of the operating system) and converts it to lowercase.

if (agent.indexOf('mac') != -1) isMac = 1;

To reassign the variables from Step 1, check the name of the OS being used. This code looks for the word mac in the agent string, and changes isMac to 1 if it finds it.

else if (agent.indexOf('win') != -1) isWin = 1;

To detect whether Windows is being used, the code simply looks for the word win in the agent string. If it's there, it sets isWin to 1.

else if (...) isOtherOS = 1;

To detect a specific operating system besides Macintosh and Windows, all you need to know is how the OS identifies itself in the platform object and then look for that string using the indexOf method.

else ( isUndetected = 1 )

Finally, you need to add a catch-all, in case some unknown (possibly future) operating system is being used.

if (isMac) {...}

Now you can use the variables you set up in Steps 1 and 2 for the OS that is being used. In this example, I simply have a message written out on the screen to tell viewers which OS they are using.

Figure 13.1. The general syntax for the platform object.

Figure 13.2. The code is being run in Windows.

Figure 13.3. The same code is being run on a Mac.

Code 13.1. This code first writes the complete appName and appVersion on the page. It then uses that information to determine the operating system so that it can display the correct message.

Code 13.1. This code first writes the complete `appName` and `appVersion` on the page. It then uses that information to determine the operating system so that it can display the correct message.