PC 또는 모바일 기기 접속 브라우저 체크 스크립트

웹 개발 시 특정 사용자 집단(안드로이드, 아이폰 사용자)을 고려해서 웹 페이지를 만들어야 할 경우가 있습니다.

예를 들어 www.naver.com 접속을 PC에서 한다면 문제없지만,

모바일 기기로 접속하면 작은 화면을 고려하여 모바일 화면에 최적화된 웹 페이지를 보여줄 필요가 있습니다.

아래 스크립트는 모바일 기기 접속 여부를 판단하는 스크립트 문장입니다.

<script type="text/javascript"> alert(navigator.userAgent); </script>

위 문장을 찍어 보면 현재 사용자가 접속한 브라우저 환경에 대한 정보를 경고(alert) 창으로 띄웁니다.

indexOf 함수를 이용해서 아이폰, 안드로이드, PC 브라우저 접속 여부를 점검할 수 있습니다.

<script type="text/javascript"> var tmpUser = navigator.userAgent; if (tmpUser.indexOf("iPhone") > 0 || tmpUser.indexOf("iPod") > 0 || tmpUser.indexOf("Android ") > 0 ) { location.href = "http://m.naver.com"; } else { location.href = "http://www.naver.com"; } </script>
indexOf 함수는 특정 문자의 위치를 알려주는 역할을 합니다.

indexOf 함수의 사용 예시는 indexOf("Android", 시작순서) 이고, 시작순서 부분은 선택사항입니다. 시작순서가 없다면, 전체 문자열에서 해당 문자를 검사합니다. 만약 시작순서를 3으로 지정하면 전체 문자열에서 4번째부터 문자 검사를 시작합니다.

 

위 스크립트 코드는 결국 브라우저 정보를 뿌려주는 navigator.userAgent 문자열 중에서 iPhone이나, iPod, Android가 있다면 해당 문자의 위치를 반환할 테고 결국 어찌 되었든 0 이상일 것이므로, 모바일에서 접속한 걸로 간주하여 모바일용 페이지인 m.naver.com으로 페이지를 이동시켜 버립니다.

아닐 경우에는 www.naver.com으로 이동하겠죠.