[자바스크립트] userAgent 사용해서 브라우저, 디바이스 정보 확인하기 (버전, PC, 모바일, OS, IOS)

아래 소스 코드는 userAgent를 활용해서 사용자의 디바이스 및 브라우저 환경에 대한 정보를 확인할 수 있습니다. 사용자의 정보를 활용하여 웹 페이지의 동작을 조정하거나 활용하시면 유용합니다.

 

소스코드

ㅇ navigator.userAgent를 사용하여 사용자의 브라우저 UserAgent 문자열을 가져옵니다. UserAgent 문자열에는 브라우저와 운영 체제에 대한 정보가 포함되어 있습니다.
ㅇ userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i)를 사용하여 UserAgent 문자열에서 모바일 기기 여부를 확인합니다.

 

<script>
// User-Agent 문자열 가져오기
var userAgent = navigator.userAgent;

// 모바일 여부 확인
var isMobile = userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i);

// 안드로이드 기기 체크
var isAndroid = userAgent.indexOf("Android") !== -1;

// 아이폰 및 아이패드 기기 체크
var isiPhone = userAgent.indexOf("iPhone") !== -1;
var isiPad = userAgent.indexOf("iPad") !== -1;

// 화면 너비 및 높이 체크
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;

// 현재 페이지 URL 가져오기
var currentURL = window.location.href;

// 쿠키 지원 체크
var areCookiesEnabled = navigator.cookieEnabled;

// 웹 스토리지 지원 체크
var isWebStorageSupported = (typeof(Storage) !== "undefined");

// 브라우저 버전 확인
var browserVersion = "";
if (userAgent.indexOf("Edg") !== -1) {
    // Microsoft Edge 브라우저를 사용 중입니다.
    browserVersion = "Microsoft Edge " + userAgent.match(/Edg\/([\d.]+)/)[1];
} else if (userAgent.indexOf("Chrome") !== -1) {
    // Chrome 브라우저를 사용 중입니다.
    browserVersion = "Google Chrome " + userAgent.match(/Chrome\/([\d.]+)/)[1];
} else if (userAgent.indexOf("Firefox") !== -1) {
    // Firefox 브라우저를 사용 중입니다.
    browserVersion = "Mozilla Firefox " + userAgent.match(/Firefox\/([\d.]+)/)[1];
} else if (userAgent.indexOf("Safari") !== -1) {
    // Safari 브라우저를 사용 중입니다.
    browserVersion = "Apple Safari " + userAgent.match(/Version\/([\d.]+)/)[1];
} else if (userAgent.indexOf("MSIE") !== -1 || userAgent.indexOf("Trident") !== -1) {
    // Internet Explorer를 사용 중입니다.
    browserVersion = "Internet Explorer";
} else {
    // 기타 브라우저를 사용 중입니다.
    browserVersion = "알 수 없는 브라우저";
}

// 모바일, 안드로이드, 아이폰, 아이패드, 화면 크기, 현재 URL, 쿠키, 웹 스토리지, 브라우저 정보 출력
console.log("사용 중인 환경 정보:");
console.log("----------------------------");
console.log(isMobile ? "모바일 기기를 사용 중입니다." : "데스크톱을 사용 중입니다.");
console.log(isAndroid ? "안드로이드 기기를 사용 중입니다." : "안드로이드 기기를 사용 중이 아닙니다.");
console.log(isiPhone ? "아이폰을 사용 중입니다." : "아이폰을 사용 중이 아닙니다.");
console.log(isiPad ? "아이패드를 사용 중입니다." : "아이패드를 사용 중이 아닙니다.");
console.log("화면 너비: " + screenWidth);
console.log("화면 높이: " + screenHeight);
console.log("현재 페이지 URL: " + currentURL);
console.log(areCookiesEnabled ? "쿠키를 지원하는 브라우저를 사용 중입니다." : "쿠키를 지원하지 않는 브라우저를 사용 중입니다.");
console.log(isWebStorageSupported ? "웹 스토리지를 지원하는 브라우저를 사용 중입니다." : "웹 스토리지를 지원하지 않는 브라우저를 사용 중입니다.");
console.log("사용 중인 브라우저: " + browserVersion);
console.log("----------------------------");
</script>

 

---

 

콘솔 화면