Question

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?

Answer 1

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.
MacIntel Apple Silicon (ARM)

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/