jscript

[jQuery] 모바일로 접속했는지 PC로 접속했는지 구분 방법

AzDesign 2018. 1. 29. 15:20

PC 로 접속했을 때와 모바일 디바이스로 접속했을 때

각각 다른 페이지를 보여주고 싶다면 다음과 같은 코드를 활용할 수 있다.

메인 페이지(index.html) 에서 접속한 디바이스를 검사해서 각각의 페이지로 분기해준다.

 

사이트 메인 페이지(index.html)

<textarea class="crayon-plain print-no" data-settings="dblclick" readonly="" style="-webkit-appearance: none; border-radius: 0px; vertical-align: middle; color: rgb(0, 0, 0); width: 667px; overflow: hidden; padding: 0px 5px; margin: 0px; height: 420px; opacity: 0; border: 0px; box-sizing: border-box; box-shadow: none; word-wrap: normal; resize: none; tab-size: 4; font-size: 14px !important; line-height: 20px !important; font-family: Monaco, MonacoRegular, "Courier New", monospace !important; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"></textarea>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>모바일 접속 확인</title>
    <script>
        var filter = "win16|win32|win64|mac|macintel";
        if ( navigator.platform  ) {
            if ( filter.indexOf( navigator.platform.toLowerCase() ) < 0 ) {
                location.href = "mobile/index.html"; //모바일 페이지 경로
            } else {
                location.href = "pc/index.html"; //PC 페이지 경로
            }
        }
    </script>
</head>
<body>
</body>
</html>

7번 라인

모바일 디바이스 접속 여부는 대부분 request 헤더 정보에 포함된 user-agent 헤더를 읽어서 판단하는데, 모바일 기기는 워낙 방대하므로, 반대로 PC 접속 여부를 판단하는 것이 더 간단하다.

 

모바일용 페이지는 mobile 폴더 안에 작성한다. (mobile/index.html)

<textarea class="crayon-plain print-no" data-settings="dblclick" readonly="" style="-webkit-appearance: none; border-radius: 0px; vertical-align: middle; color: rgb(0, 0, 0); width: 667px; overflow: hidden; padding: 0px 5px; margin: 0px; height: 660px; opacity: 0; border: 0px; box-sizing: border-box; box-shadow: none; word-wrap: normal; resize: none; tab-size: 4; font-size: 14px !important; line-height: 20px !important; font-family: Monaco, MonacoRegular, "Courier New", monospace !important; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"></textarea>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>모바일 접속 Index</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(function(){
            var txt = "";
            txt += "<p>브라우저 코드네임 : " + navigator.appCodeName + "</p>";
            txt += "<p>브라우저 이름 : " + navigator.appName + "</p>";
            txt += "<p>브라우저 버전 : " + navigator.appVersion + "</p>";
            txt += "<p>쿠키 사용여부 : " + navigator.cookieEnabled + "</p>";
            txt += "<p>브라우저 언어 : " + navigator.language + "</p>";
            txt += "<p>온라인 연결 여부 : " + navigator.onLine + "</p>";
            txt += "<p>사용 플랫폼 : " + navigator.platform + "</p>";
            txt += "<p>User-agent 헤더 정보 : " + navigator.userAgent + "</p>";
 
            document.getElementById("bcheck").innerHTML = txt;
        });
    </script>
</head>
<body>
<h2>모바일(휴대폰/태블릿)에서 접속!</h2>
  
    <fieldset>
        <legend>접속정보</legend>
        <div id="bcheck"></div>
    </fieldset>
</body>
</html>

 

데스크탑(PC) 페이지는 pc 폴더 안에 작성한다. (pc/index.html)

<textarea class="crayon-plain print-no" data-settings="dblclick" readonly="" style="-webkit-appearance: none; border-radius: 0px; vertical-align: middle; color: rgb(0, 0, 0); width: 667px; overflow: hidden; padding: 0px 5px; margin: 0px; height: 660px; opacity: 0; border: 0px; box-sizing: border-box; box-shadow: none; word-wrap: normal; resize: none; tab-size: 4; font-size: 14px !important; line-height: 20px !important; font-family: Monaco, MonacoRegular, "Courier New", monospace !important; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"></textarea>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>PC 접속 Index</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(function(){
            var txt = "";
            txt += "<p>브라우저 코드네임 : " + navigator.appCodeName + "</p>";
            txt += "<p>브라우저 이름 : " + navigator.appName + "</p>";
            txt += "<p>브라우저 버전 : " + navigator.appVersion + "</p>";
            txt += "<p>쿠키 사용여부 : " + navigator.cookieEnabled + "</p>";
            txt += "<p>브라우저 언어 : " + navigator.language + "</p>";
            txt += "<p>온라인 연결 여부 : " + navigator.onLine + "</p>";
            txt += "<p>사용 플랫폼 : " + navigator.platform + "</p>";
            txt += "<p>User-agent 헤더 정보 : " + navigator.userAgent + "</p>";
 
            document.getElementById("bcheck").innerHTML = txt;
        });
    </script>
</head>
<body>
    <h2>데스크탑 모드(PC)로 접속!</h2>
  
    <fieldset>
        <legend>접속정보</legend>
        <div id="bcheck"></div>
    </fieldset>
</body>
</html>


저작자표시 비영리 변경금지 (새창열림)