다른 날 나는 사용자의 컴퓨터 정보(스누핑이 아님)를 얻고 싶었지만 버전 등과 같은 운영 체제(OS) 이름과 같은 기본 정보를 표시하기를 원했던 Vue에서 임의의 데모 앱을 만들고 있었습니다.

나는 내가 이것에 너무 서툴러서 그런 일을 하려는 생각을 거의 즉시 철회했다고 고백해야 했다. 하지만 지금은 Vue가 아니라면 바닐라 JS로 이 작업을 수행해야 한다고 생각합니다.

더 나아가 OS를 감지한 후 DOM 요소를 동적으로 추가하거나 삭제하기로 결정했습니다. 그렇지는 않지만 웹과 모바일 모두에서 OS를 감지하는 방법을 확실히 배울 것입니다.



이런!

데스크톱 OS 감지(Windows/Mac/Linux)

먼저 클라이언트의 시스템이 응용 프로그램 스토어를 확장해야 하는 OS(Windows), 거의 모든 프로그래머와 해커가 가장 좋아하는 OS(Linux) 또는 XCode를 독점적으로 실행할 수 있는 OS(Mac)를 실행하고 있는지 감지해 보겠습니다. .

이는 navigator.appVersion 개체의 window 값을 분석하여 간단히 달성할 수 있습니다. 이 간단한 일이 많은 일을 할 수 있습니다. 현재 장치 OS에 대해 알려줄 뿐만 아니라(자세한 내용은 아래 참조) 현재 실행 중인 브라우저에 대한 버전 정보를 얻는 데 사용할 수도 있습니다.

OS 유형에 관한 문자열 정보를 보유하는 JS의 변수로 detectedOS를 선언해 보겠습니다. 다음으로 3개의 if 검사를 수행합니다( switch도 작동할 수 있음).

// default value just in case if nothing is detected
var detectedOS = "Unknown OS"; 

첫 번째 검사에서 navigator.appVersion를 사용하여 Win(Windows), Mac(MacOS) 및 Linux의 세 가지 주요 OS 플랫폼의 index을 가져옵니다.

if (navigator.appVersion.indexOf("Mac") != -1) 
    detectedOS = "MacOS";

여기에서 인덱스 값이 1와 같지 않은지 확인한 다음 변수 값을 "MacOS"로 설정합니다.

마찬가지로 다른 두 OS에 대해서도 동일한 검사를 수행할 수 있습니다.

var detectedOS = "Unknown OS";

if (navigator.appVersion.indexOf("Mac") != -1) 
    detectedOS = "MacOS";

if (navigator.appVersion.indexOf("Win") != -1) 
    detectedOS = "Windows";

if (navigator.appVersion.indexOf("Linux") != -1) 
    detectedOS = "Linux";

좋아, 모두 멋지지만 특정 OS가 감지되었음을 사용자에게 표시하는 방법은 무엇입니까? 이를 수행하는 방법에는 여러 가지가 있습니다. 한 가지 좋은 방법은 다음과 같습니다.

버튼을 클릭하면 "Device OS is:"가 표시되는 alert() 추가.

var detectOS = "Unknown OS";

if (navigator.appVersion.indexOf("Win") != -1) 
    detectOS = "Windows";

if (navigator.appVersion.indexOf("Mac") != -1) 
    detectOS = "MacOS";

if (navigator.appVersion.indexOf("Linux") != -1) 
    detectOS = "Linux";

document.querySelector('button').addEventListener('click', detect);

function detect() {
   alert(`Device OS is: ${detectOS}`)
}

Mac에서는 다음과 같이 표시됩니다.



Windows에서:



그리고 리눅스에서:


죄송합니다. 저는 Linux 머신이 없습니다 🙃

모바일 OS(Android/iOS) 감지

현재 코드를 사용하여 모바일에서 실행하려고 하면(CodePen을 통해) 다음 경고가 표시됩니다.



Android is based on a modified version of Linux은 사실이지만 완전히 Linux OS는 아닙니다. 그렇다면 여기에서 "Linux"대신 "Android"가 감지되는지 어떻게 확인합니까?

이것은 다음 답변에서 Stackoverflow 사용자 Vladyslav Turak에 의해 설명됩니다.

답: JS로 MacOS, iOS, Windows, Android 및 Linux OS 감지

16년 7월 7일

171

window.navigator 개체와 해당 속성(platform , appVersion 및 userAgent )에 대해 많은 것을 배웠습니다. 내 생각에 사용자의 OS를 100% 확실하게 감지하는 것은 거의 불가능하지만 내 경우에는 85%-90%면 충분했습니다.
그래서 수많은 stackoverflows의 답변과 일부 기사를 검토한 후, 저는…




Open Full Answer

function getOS() {
  var userAgent = window.navigator.userAgent,
      platform = window.navigator.platform,
      macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
      windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
      iosPlatforms = ['iPhone', 'iPad', 'iPod'],
      os = null;

  if (macosPlatforms.indexOf(platform) !== -1) {
    os = 'Mac OS';
  } else if (iosPlatforms.indexOf(platform) !== -1) {
    os = 'iOS';
  } else if (windowsPlatforms.indexOf(platform) !== -1) {
    os = 'Windows';
  } else if (/Android/.test(userAgent)) {
    os = 'Android';
  } else if (!os && /Linux/.test(platform)) {
    os = 'Linux';
  }

  return os;
}

alert(getOS());

보시다시피 이전과 동일한 if 문 검사를 사용하고 있지만 Android의 경우 /Android/.test 으로 navigator.userAgent 테스트하고 있습니다.

이것은 매우 좋은 해결 방법이며 내 Android 휴대폰에서 실행하면 결과는 다음과 같습니다.



해당 기기를 확인할 iOS 기기가 없습니다. 그렇게 할 수 있으며 아래 의견에 알려주십시오.

이에 대한 답을 준 사람은 다음과 같이 분명히 말했습니다.

This code works properly. I tested it on all the OS: MacOS, iOS, Android, Windows and UNIX, but I can't guarantee 100% sure.

읽어주셔서 감사합니다. 감사합니다! 좋은 하루 보내세요. (✿◕‿◕✿)

Debugging can be tough 😂
. pic.twitter.com/UtkN6iuRBG

— Coding Interview Coach (@CoachCoding)

📫 주간 개발자 뉴스레터 구독 📫

추신: 올해부터 여기 DEV Community에 글을 쓰기로 했습니다. 이전에는 Medium에 글을 썼습니다. 내 기사를 보고 싶은 사람이 있으면 here의 내 미디엄 프로필입니다.