Best way to detect Mac OS X or Windows computers with JavaScript or jQuery
JavascriptJqueryJavascript Problem Overview
So I'm trying to move a "close" button to the left side when the user is on Mac and the right side when the user is on PC. Now I'm doing it by examining the user agent, but it can be too easily spoofed for reliable OS detection. Is there a surefire way to detect whether the OS on which the browser is running is Mac OS X or Windows? If not, what's better than user agent sniffing?
Javascript Solutions
Solution 1 - Javascript
The window.navigator.platform property is not spoofed when the userAgent string is changed. I tested on my Mac if I change the userAgent to iPhone or Chrome Windows, navigator.platform remains MacIntel.
The property is also read-only
I could came up with the following table
>### Mac Computers ###
>
>>Mac68K
Macintosh 68K system.
>>MacPPC
Macintosh PowerPC system.
>>MacIntel
Macintosh Intel system.
>
>### iOS Devices ###
>
>>iPhone
iPhone.
>>iPod
iPod Touch.
>>iPad
iPad.
Modern macs returns navigator.platform == "MacIntel"
but to give some "future proof" don't use exact matching, hopefully they will change to something like MacARM
or MacQuantum
in future.
var isMac = navigator.platform.toUpperCase().indexOf('MAC')>=0;
To include iOS that also use the "left side"
var isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
var isIOS = /(iPhone|iPod|iPad)/i.test(navigator.platform);
var is_OSX = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
var is_iOS = /(iPhone|iPod|iPad)/i.test(navigator.platform);
var is_Mac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
var is_iPhone = navigator.platform == "iPhone";
var is_iPod = navigator.platform == "iPod";
var is_iPad = navigator.platform == "iPad";
/* Output */
var out = document.getElementById('out');
if (!is_OSX) out.innerHTML += "This NOT a Mac or an iOS Device!";
if (is_Mac) out.innerHTML += "This is a Mac Computer!\n";
if (is_iOS) out.innerHTML += "You're using an iOS Device!\n";
if (is_iPhone) out.innerHTML += "This is an iPhone!";
if (is_iPod) out.innerHTML += "This is an iPod Touch!";
if (is_iPad) out.innerHTML += "This is an iPad!";
out.innerHTML += "\nPlatform: " + navigator.platform;
<pre id="out"></pre>
Since most O.S. use the close button on the right, you can just move the close button to the left when the user is on a MacLike O.S., otherwise isn't a problem if you put it on the most common side, the right.
setTimeout(test, 1000); //delay for demonstration
function test() {
var mac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
if (mac) {
document.getElementById('close').classList.add("left");
}
}
#window {
position: absolute;
margin: 1em;
width: 300px;
padding: 10px;
border: 1px solid gray;
background-color: #DDD;
text-align: center;
box-shadow: 0px 1px 3px #000;
}
#close {
position: absolute;
top: 0px;
right: 0px;
width: 22px;
height: 22px;
margin: -12px;
box-shadow: 0px 1px 3px #000;
background-color: #000;
border: 2px solid #FFF;
border-radius: 22px;
color: #FFF;
text-align: center;
font: 14px"Comic Sans MS", Monaco;
}
#close.left{
left: 0px;
}
<div id="window">
<div id="close">x</div>
<p>Hello!</p>
<p>If the "close button" change to the left side</p>
<p>you're on a Mac like system!</p>
</div>
http://www.nczonline.net/blog/2007/12/17/don-t-forget-navigator-platform/
Solution 2 - Javascript
It's as simple as that:
function isMacintosh() {
return navigator.platform.indexOf('Mac') > -1
}
function isWindows() {
return navigator.platform.indexOf('Win') > -1
}
Solution 3 - Javascript
Is this what you are looking for? Otherwise, let me know and I will remove this post.
Try this jQuery plugin: http://archive.plugins.jquery.com/project/client-detect
Demo: http://www.stoimen.com/jquery.client.plugin/
This is based on quirksmode BrowserDetect a wrap for jQuery browser/os detection plugin.
For keen readers:
http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/
http://www.quirksmode.org/js/support.html
And more code around the plugin resides here: http://www.stoimen.com/jquery.client.plugin/jquery.client.js
Solution 4 - Javascript
You can test this:
function getOS() {
let userAgent = window.navigator.userAgent.toLowerCase(),
macosPlatforms = /(macintosh|macintel|macppc|mac68k|macos)/i,
windowsPlatforms = /(win32|win64|windows|wince)/i,
iosPlatforms = /(iphone|ipad|ipod)/i,
os = null;
if (macosPlatforms.test(userAgent)) {
os = "macos";
} else if (iosPlatforms.test(userAgent)) {
os = "ios";
} else if (windowsPlatforms.test(userAgent)) {
os = "windows";
} else if (/android/.test(userAgent)) {
os = "android";
} else if (!os && /linux/.test(userAgent)) {
os = "linux";
}
return os;
}
document.getElementById('your-os').textContent = getOS();
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 id="your-os"></h1>
</body>
</html>
Solution 5 - Javascript
For completion: Some browsers support navigator.userAgentData.platform
, which is a read-only property.
console.log(navigator.userAgentData.platform);
// macOs
Please be aware that Navigator.platform
is deprecated.
Solution 6 - Javascript
Let me know if this works. Way to detect an Apple device (Mac computers, iPhones, etc.) with help from StackOverflow.com:
https://stackoverflow.com/questions/19877924/what-is-the-list-of-possible-values-for-navigator-platform-as-of-today
var deviceDetect = navigator.platform;
var appleDevicesArr = ['MacIntel', 'MacPPC', 'Mac68K', 'Macintosh', 'iPhone', 'iPod', 'iPad', 'iPhone Simulator', 'iPod Simulator', 'iPad Simulator', 'Pike
v7.6 release 92', 'Pike v7.8 release 517'];
// If on Apple device
if(appleDevicesArr.includes(deviceDetect)) {
// Execute code
}
// If NOT on Apple device
else {
// Execute code
}
Solution 7 - Javascript
I think all Chrome or Chromium-based browser will return MacIntel
on the macOS platform regardless of the hardware architecture.