코딩이야기/Javascript

자바스크립트 모바일 접속기기 체크

완소줄기 2017. 2. 1. 01:00

자바스크립트 모바일 접속기기 체크



이번에 소개할 예제는 사용자가 접속한 환경이 모바일인지 PC인지 체크해주는 스크립트 입니다.

사용자의 환경에 따라 보여줘야 할 이미지라든지 처리해야 할 메소드를 설정할 경우 필요한 소스인데요.

웹브라우저의 환경에 맞게 오류를 최소화 하기 위해 이 방법을 많이 사용하기도 합니다.






코드는 그리 길지 않습니다. 그리고 굳이 코드를 외우려고 할 필요도 없습니다.

체크 후 결과값에 따라 어떠한 오퍼레이션을 지정할지만 생각하고 코드를 확인해 보세요.





1. 코드


var browserType = "pc";

var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson');

for (var word in mobileKeyWords){

if (navigator.userAgent.match(mobileKeyWords[word]) != null){

browserType = "mobile";

}

}



if(browserType == 'pc'){

PC일 경우 동작

}else{

mobile일 경우 동작

}


2. 설명


(1)browserType 이라는 변수를 pc라는 값으로 저장합니다.

(2)mobileKeyWords 라는 배열변수에 각종 모바일 디바이스의 userAgent 타입을 지정합니다.

(3)for문을 이용하여 mobileKeyWords라는 배열 변수를 단어를 체크합니다.

(4)navigator.userAgent.match 함수를 이용하여 접속한 기기와 mobileKeyWords의 배열값이 일치하는지 체크합니다.

(5)만약에 일치한다면 browserType 변수를 mobile로 설정합니다.

(6)체크 후 반환값에 따라 수행할 동작을 지정합니다.






3. 결과

(1)PC접속


(2)모바일접속


(3)소스코드




4. 스크립트코드


<script>

var browserType = "pc";

var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson');

for (var word in mobileKeyWords){

if (navigator.userAgent.match(mobileKeyWords[word]) != null){

browserType = "mobile";

}

}


if(browserType == 'pc'){

alert("pc로 접속하셨네요.");

}else{

alert("mobile로 접속하셨네요.");

}

</script>





자바스크립트 모바일 접속기기 체크.. 이 포스트가 유용하셨다면부탁드려요 :)