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

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

★프로그래밍/HTML, CSS, JS, XML :: 2016.08.11 22:33
/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버전 보기' 옵션을 켜고 접속한 상태라면 모바일이 아닌 것으로 인식할 수 있습니다.)

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

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

댓글을 달아 주세요.

1 2 3
Today 24    Yday 68    Tot 71,745
Juwan Park
Juwan Park's blog is powered by Daum and TISTORY.
Contemporary Blue for TISTORY.
Designed by Juwan Park. Creative Commons License
▲ TOP