[JS] 뷰포트의 넓이와 상관없이 PC, 모바일 구분하기

반응형 웹을 만들 때, 보통 PC, 모바일을 뷰포트의 넓이 기준으로 나눕니다. 하지만 때에 따라서 넓이와 상관없이 플랫폼을 구분해야 될 때가 있습니다. 이럴 때 Navigator 객체를 사용해 플랫폼을 구분할 수 있습니다.

 

Navigator 객체

브라우저의 버전, 운영체계 등 브라우저에 대한 다양한 정보를 담고 있는 객체.

 

브라우저의 플랫폼 정보

navigator 객체에는 브라우저에 대한 다양한 정보들이 저장되어 있고, 브라우저가 실행중인 플랫폼에 대한 정보도 포함되어 있습니다. 이 정보를 바탕으로 아래와 같이 브라우저를 구분하는 함수를 만들 수 있습니다.

const pc_platform = "win16|win32|win64|mac|macintel";

function platformChk() {
    if (0 > pc_platform.indexOf(navigator.platform.toLowerCase())) {
    	return "Mobile";
    }
    else {
    	return "PC";
    }
}

이제 이 함수를 아래와 같이 콘솔에서 실행해 보면,

console.log("현재 '" + platformChk() + "'에서 실행되고 있습니다.");

현재 PC에서 실행되고 있다고 나옵니다. 이 함수를 사용해 넓이의 제약없이 반응형 웹을 제작할 수 있습니다.