1. ホーム
  2. javascript

[解決済み] JavaScriptまたはjQueryを使用してMac OS XまたはWindowsコンピュータを検出する最良の方法

2022-07-08 09:17:22

質問

私は、ユーザーが Mac の場合は "close"ボタンを左側に、PC の場合は右側に移動しようとしています。現在、ユーザー エージェントを調べることによってそれを行っていますが、ユーザー エージェントはあまりにも簡単になりすますことができるので、信頼できる OS の検出はできません。ブラウザが動作しているOSがMac OS XなのかWindowsなのか、確実に検出する方法はないでしょうか?もしそうでなければ、ユーザーエージェントのスニッフィングよりも良い方法は何でしょうか?

どのように解決するのですか?

この ウィンドウズ・ナビゲーター・プラットフォーム プロパティは、userAgent の文字列を変更しても詐称されません。 MacでuserAgentをiPhoneやChrome Windowsに変更した場合のテストをしてみました。 navigator.platform は MacIntel のままです。

また、このプロパティは 読み取り専用


次のような表ができました。

Mac コンピュータ

<ブロッククオート

Mac68K Macintosh 68K システム。

MacPPC Macintosh PowerPCシステム。

MacIntel Macintosh Intelシステム。

iOS デバイス

iPhone iPhone

iPod iPod Touchです。

iPad iPad


モダン・マック・リターン navigator.platform == "MacIntel" を返しますが、将来のために完全一致は使わないでください。 MacARM または MacQuantum を使用します。

var isMac = navigator.platform.toUpperCase().indexOf('MAC')>=0;

左側("left side")も使用するiOSを含めるように。

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>


ほとんどの O.S. は右側に閉じるボタンを使用するので、ユーザーが MacLike O.S. を使用している場合は閉じるボタンを左側に移動すればよく、そうでない場合は最も一般的な側である右側に配置すれば問題ないでしょう。

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/