접속한 기기가 모바일인지 아닌지 확인하는 자바스크립트

이 글은 필자의 티스토리 블로그에서 포크하였습니다. (원글 링크)

요즘 웹 사이트를 보면 모바일로 접속하였느냐 일반 PC로 접속하였느냐에 따라 페이지가 다르게 보여지는 경우들이 있는데요. 이 포스트에서는 모바일 접속 여부에 따라 다르게 보여지는 기능을 구현하기 위한 자바스크립트를 설명합니다.

/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

일단 이 한 줄의 코드만으로도 모바일인지 아닌지 간단하게 검출 가능합니다.
만약 모바일에서 접속했다면 true 값을 돌려줄 것이고 그렇지 않다면 false 값을 돌려줄 것입니다.

하지만 정말로 이 한 줄만 가지고는 단지 검출만 가능할 뿐이지 사용자에게 직접 보여줄 수는 없습니다.
어떻게 하면 사용자에게 직접 모바일 접속 여부를 보여줄 수 있을까요?

일단 코드가 너무 기니 함수를 선언해 봅시다.

function isMobile() {
	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

이 함수를 선언하면, isMobile() 함수 호출시 모바일에서 접속하면 true 값을, 모바일이 아닌 일반 PC에서 접속하면 false 값을 돌려줄 것입니다.

하지만 이걸로는 아직 부족합니다. 어떻게 할까요?
일단 isMobile() 함수를 미리 정의해 두었다고 가정하고

if (isMobile()) {
	// 모바일이면 실행될 코드 들어가는 곳
} else {
	// 모바일이 아니면 실행될 코드 들어가는 곳
}

이렇게 조건문을 통해 모바일 여부에 따른 코드 실행이 가능합니다.

아래 버튼을 눌러 봅시다. userAgent 코드를 이용한 모바일 여부 검출 스크립트를 삽입하였습니다. 이 버튼은 모바일에서 접속했는지의 여부에 따라 다른 메시지를 띄웁니다.
(참고: 모바일로 접속하였더라도 ‘PC버전 보기’ 옵션을 켜고 접속한 상태라면 모바일이 아닌 것으로 인식할 수 있습니다.)

눌러 보세요.

물론 응용하면 다양한 방향으로 코드를 작성할 수도 있습니다.

유용하게 활용하시기 바랍니다.