Best way to detect Mac OS X or Windows computers with JavaScript or jQuery
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/
It's as simple as that:
function isMacintosh() {
return navigator.platform.indexOf('Mac') > -1
}
function isWindows() {
return navigator.platform.indexOf('Win') > -1
}
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
Let me know if this works. Way to detect an Apple device (Mac computers, iPhones, etc.) with help from StackOverflow.com:
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
}