Javascript / Jquery PC접속, Mobile접속 유무 확인하기

가이드문구


Javascript / Jquery PC접속, Mobile접속 유무 확인하기


웹사이트를 개발하다보면 PC환경에서 접속했는지, 모바일 환경에서 접속했는지 체크를 해야 하는 경우가 있습니다.

반응형 웹을 개발하면 모바일에서 사용하는 UI 또는 Javascript를 적용하기 위해서죠.


navigator 객체의 platform 속성을 확인해서 체크하는 방법을 보겠습니다.

platform 속성 체크가 가능한 값은 아래와 같습니다.

Win16 : 16비트 윈도위기반 컴퓨터
Win32 : 32비트 윈도위기반 컴퓨터
Win64 : 64비트 윈도위기반 컴퓨터
MacIntel  :  인텔CPU 를 가진 매킨토시 컴퓨터
Mac : 매킨토시컴퓨터

이상, 5가지 정도의 값이 PC접속시 발생가능한 속성이며 기타 속성은 무시하거나 모바일 접속으로 
생각하여도 좋을 것이다.

Linux armv7l
HP-UX
Linux i686
SunOS
WinCE
Mac68K : 10여년전 개발이 중단된 68k 프로세서를 장착한 매킨토시컴퓨터
MacPPC : 모토롤라에서 개발한 PowerPC 프로세서를 장착한 매킨토시컴퓨터
Etc..

예제 코드)
  1. var filter = "win16|win32|win64|macintel|mac|"; // PC일 경우 가능한 값
  2. if( navigator.platform) {
  3. if( filter.indexOf(navigator.platform.toLowerCase())<0 ) {
  4. alert("모바일에서 접속하셨습니다");
  5. } else {
  6. alert("PC에서 접속하셨습니다");
  7. }
  8. }


다음과 같이 User-Agent 를 이용하여 확인하는 방법도 있다.

  1. <%
  2. // 헤더에서 스마트폰 여부확인 후 리다이렉트
  3. String browser = request.getHeader("User-Agent"); // 브라우저 구해오기
  4. boolean result = false;
  5. if (browser.indexOf("Android") > 0) { // 안드로이드로 접속했다면 결과값 true
  6. result = true;
  7. } else if (browser.indexOf("iPhone") > 0) { // 아이폰으로 접속했다면 결과값 true
  8. result = true;
  9. }
  10. if (result == true) {
  11. response.sendRedirect("http://m.naver.com"); // 안드로이드나 아이폰으로 접속했다면 모바일사이트로 이동
  12. }
  13. %>


작성자 소개
초이 프로필
WrapUp 블로거

초이

반려견을 좋아하고, 차를 좋아하고, 여행을 좋아하고, 맛집을 찾아 즐기는 웹 개발자 입니다^^