programing

JavaScript 또는 jQuery를 사용하여 Mac OS X 또는 Windows 컴퓨터를 검색하는 가장 좋은 방법

javajsp 2023. 8. 2. 08:48

JavaScript 또는 jQuery를 사용하여 Mac OS X 또는 Windows 컴퓨터를 검색하는 가장 좋은 방법

그래서 저는 사용자가 Mac에 있을 때는 왼쪽으로, PC에 있을 때는 오른쪽으로 "닫기" 버튼을 이동하려고 합니다.지금은 사용자 에이전트를 검사하여 수행하고 있지만 신뢰할 수 있는 OS 탐지를 위해 너무 쉽게 스푸핑될 수 있습니다.브라우저가 실행 중인 OS가 Mac OS X인지 Windows인지 확인할 수 있는 확실한 방법이 있습니까?그렇지 않다면, 사용자 에이전트가 냄새를 맡는 것보다 더 나은 것은 무엇입니까?

window.navigator.platform 속성은 userAgent 문자열이 변경될 때 스푸핑되지 않습니다.사용자 에이전트를 iPhone 또는 Chrome Windows로 변경하면 Mac에서 테스트를 수행했는데, navigator.platform은 MacIntel로 유지됩니다.

navigator.platform is not spoofed when the userAgent string is changed

속성도 읽기 전용입니다.

navigator.platform is read-only

저는 다음 표를 생각해 낼 수 있었습니다.

맥 컴퓨터

Mac68K Macintosh 68K 시스템.
MacPPC 매킨토시 파워PC 시스템.
MacIntel 매킨토시 Intel 시스템.
MacIntel 애플 실리콘 (ARM)

iOS 장치

iPhone 아이폰.
iPod 아이팟 터치.
iPad 아이패드.

최신 맥의 귀환navigator.platform == "MacIntel"하지만 "미래의 증거"를 제공하기 위해 정확한 일치를 사용하지 마십시오, 바라건대 그들이 비슷한 것으로 바뀌기를 바랍니다.MacARM또는MacQuantum금후에

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

"왼쪽"도 사용하는 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>

대부분의 OS는 오른쪽에 있는 닫기 버튼을 사용하기 때문에 사용자가 MacLike OS에 있을 때 닫기 버튼을 왼쪽으로 이동하면 됩니다. 그렇지 않으면 가장 일반적인 쪽인 오른쪽에 두면 문제가 없습니다.

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/

이는 매우 간단합니다.

function isMacintosh() {
  return navigator.platform.indexOf('Mac') > -1
}

function isWindows() {
  return navigator.platform.indexOf('Win') > -1
}

테스트할 수 있습니다.

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>

이전 답변에서 언급했듯이 navigator.platform은 더 이상 사용되지 않습니다.navigator.userAgentData를 사용해야 하지만 여전히 지원이 부족합니다(firefox, safari는 2022년에 지원하지 않습니다).

navigator.userAgentData는 https를 통해 호환되는 브라우저에서만 작동합니다.

다음은 UserAgentData를 기존 방식으로 대체하여 사용하는 스크립트입니다.

function get_platform() {
    // 2022 way of detecting. Note : this userAgentData feature is available only in secure contexts (HTTPS)
    if (typeof navigator.userAgentData !== 'undefined' && navigator.userAgentData != null) {
        return navigator.userAgentData.platform;
    }
    // Deprecated but still works for most of the browser
    if (typeof navigator.platform !== 'undefined') {
        if (typeof navigator.userAgent !== 'undefined' && /android/.test(navigator.userAgent.toLowerCase())) {
            // android device’s navigator.platform is often set as 'linux', so let’s use userAgent for them
            return 'android';
        }
        return navigator.platform;
    }
    return 'unknown';
}

let platform = get_platform().toLowerCase();

let isOSX = /mac/.test(platform); // Mac desktop
let isIOS = ['iphone', 'ipad', 'ipod'].indexOf(platform); // Mac iOs
let isApple = isOSX || isIOS; // Apple device (desktop or iOS)
let isWindows = /win/.test(platform); // Windows
let isAndroid = /android/.test(platform); // Android
let isLinux = /linux/.test(platform); // Linux

완료 시:일부 브라우저에서 지원navigator.userAgentData.platform읽기 전용 속성입니다.

console.log(navigator.userAgentData.platform);
// macOs

알아두시기 바랍니다.Navigator.platform 사용되지 않습니다.

이것이 당신이 찾고 있던 것이에요?그렇지 않으면 알려주시면 이 게시물을 삭제하겠습니다.

다음 jQuery 플러그인 사용: http://archive.plugins.jquery.com/project/client-detect

데모: http://www.stoimen.com/jquery.client.plugin/

이는 jQuery 브라우저/os 탐지 플러그인에 대한 쿼크 모드 브라우저 탐지 랩을 기반으로 합니다.

열성적인 독자를 위한:
http://www.stoimen.com/blog/2009/07/16//http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/
http://www..org/js/support.htmlhttp ://www.quirksmode.org/js/support.html

플러그인에 대한 자세한 코드는 http://www.stoimen.com/jquery.client.plugin/jquery.client.js 에 있습니다.

이것이 효과가 있는지 알려주세요.StackOverflow.com 의 도움을 받아 Apple 장치(Mac 컴퓨터, iPhone 등)를 검색하는 방법:
오늘 현재 navigator.platform에 대한 가능한 값 목록은 무엇입니까?

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
}

크롬 또는 크롬 기반 브라우저가 모두 돌아올 것 같습니다.MacIntel하드웨어 아키텍처에 관계없이 macOS 플랫폼에서 사용할 수 있습니다.

자세한 내용은 크롬 소스 코드를 확인하십시오.

언급URL : https://stackoverflow.com/questions/10527983/best-way-to-detect-mac-os-x-or-windows-computers-with-javascript-or-jquery

'programing' 카테고리의 다른 글

테이블 열 너비 설정  (0) 2023.08.07
Windows OS에서 MySQL 또는 MariaDb에 TokUdb 플러그인 사용  (0) 2023.08.02
선택하지 않도록 jQuery의 라디오 버튼을 재설정하는 방법  (0) 2023.08.02
Spring Api-Gateway : (M1) java.lang.불만족스러운 링크 오류: netty_resolver_dns_native_macos_aarch_64 없음  (0) 2023.08.02
Android MVVM View 모델에서 컨텍스트를 가져오는 방법  (0) 2023.08.02

'programing'의 다른글

  • 현재글JavaScript 또는 jQuery를 사용하여 Mac OS X 또는 Windows 컴퓨터를 검색하는 가장 좋은 방법

관련글

댓글

티스토리툴바