[JS] 안드로이드, 아이폰, PC 구분하는 방법

안드로이드, 아이폰, PC 구분하는 방법

WEB API에는 navigator라는 것이 있습니다. 이것을 이용해서 사용자 에이전트의 상태와 신원정보에 대해서 알 수 있습니다.

 

Chrome Console

크롬 콘솔에서 'navigator'라고 치면 간단하게 볼 수 있습니다.

 

아래에 userAgent라는 정보가 있는데 여기에 android인지, iphone인지 정보가 들어있다.

 

따라서

// 사용자의 기기 종류 확인
function detectDeviceType() {
  var userAgent = navigator.userAgent;
  
  if (userAgent.match(/Android/i)) {
    // 안드로이드 기기
    return "Android";
  } else if (userAgent.match(/iPhone|iPad|iPod/i)) {
    // 아이폰, 아이패드, 아이팟 기기
    return "iOS";
  } else {
    // 기타 PC 웹 브라우저
    return "PC";
  }
}

// 예시: 기기 종류에 따라 다른 동작 수행
var deviceType = detectDeviceType();
if (deviceType === "Android") {
  console.log("안드로이드 기기입니다.");
} else if (deviceType === "iOS") {
  console.log("아이폰, 아이패드, 아이팟 기기입니다.");
} else {
  console.log("PC 웹 브라우저입니다.");
}

이런 식으로 사용할 수 있다.

 

Web API navigator:

navigator는 JavaScript에서 제공하는 Web API의 하나로, 사용자의 브라우저 및 기기 정보를 얻을 수 있는 객체입니다. navigator 객체의 속성을 이용하여 다양한 정보를 확인할 수 있습니다. 위의 기기 구분 예제에서도 navigator.userAgent를 사용하여 사용자의 User Agent 정보를 얻어와서 기기를 구분하였습니다.

 

주요한 navigator 속성들은 다음과 같습니다

• navigator.userAgent: 사용자의 User Agent 정보를 문자열로 반환합니다. 이를 통해 사용자의 기기 및 브라우저 정보를 파악할 수 있습니다.
• navigator.platform: 사용자의 운영체제 플랫폼 정보를 문자열로 반환합니다. 예를 들어, "Win32", "MacIntel" 등이 반환됩니다.
• navigator.language: 사용자의 기본 언어 설정 정보를 문자열로 반환합니다. 예를 들어, "en-US", "ko-KR" 등이 반환됩니다. 위의 속성들을 이용하여 브라우저와 기기에 따라 다른 기능을 제공하거나, 사용자의 언어 설정에 따라 다국어 처리를 할 수 있습니다.

이렇게 JavaScript의 navigator 객체를 활용하여 사용자의 기기 및 브라우저 정보를 파악하고 웹 애플리케이션을 다양한 환경에 적합하게 구성할 수 있습니다.