PC버전 / 모바일버전 상호 전환하기, PC페이지 모바일페이지

반응형으로 제작했을 경우는 상관없겠지만, PC버전 모바일버전을 별도로 제작하는 경우에는 아래 첨부한 이미지의 하단부분에서 보듯이 PC버전을 모바일버전으로 바꾸거나 모바일을 PC버전으로 바꾸는 경우가 있습니다

 

 

PC버전, 모바일버전 전환을 위해서는 여러가지 방법이 있습니다만, 그 중의 한가지 방법인 쿠키를 이용한 구현방법을 알아보겠습니다. 

 

 

 

 

우선 아래와 같이 모바일환경에서 접속했을 때, PC환경으로 가기위한 링크를 만듭니다.

 

 

 

 

 

그리고 클릭시 실행되는 함수에서 index_gate.html 파일을 하나 만들고 webmb 라는 옵션에 webpage 라고 전달을 합니다. 물론, 모바일에서 PC 로 전환되는 경우라면 webmb 에 pc라는 값을 주면 됩니다.

 

 

 

 

그 다음에 index_gate.html 파일에서는 webmb 값을 받아서 그 값에 따라, VIEW_TYPE 이라는 쿠키에 PC인지 모바일인지 설정만 해주면 됩니다. 

 

 

 

 

 

<?
    $webmb = $_REQUEST['webmb'];
?>
<script language="javascript">
        function setCookie( name, value, expiredays )  {
            var todayDate = new Date();
            todayDate.setDate( todayDate.getDate() + expiredays );
            document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";" ;
        }
</script>
<?
    if ( $webmb == "webpage" )    {
        ?>
        <script language="javascript">
            setCookie( "VIEW_TYPE", "PC" , 1);
            window.location.href = "/index.html";
        </script>
        <?
    }
    else if ( $webmb == "mobile" )    {
        ?>
        <script language="javascript">
             setCookie( "VIEW_TYPE", "MOBILE" , 1);
             window.location.href = "/index.html";
         </script>
        <?
    }
?>

 

 

 

 

 

이후 연결되는 index.html  에서는 VIEW_TYPE 값이 PC 이면 PC 페이지로, MOBILE 이면 MOBILE 페이지로 연결해 주면 됩니다. 

 

 

 

 

 

 

 

이후 index.html 에서 링크되는 모든 페이지에서 PC 인지 모바일인지 확인을 해야 하므로, 각 페이지에 아래와 같이 javascript 파일을 삽입해 주면 됩니다

 

 

 

<script SRC="./view_type.js"></script>

 

 

 

view_type.js 에는 다음과 같은 코드가 있으며, 쿠키값을 확인하여 해당 페이지로 연결해 주는 기능을 합니다

            
         

 var mobileKeyWords = new Array('iPad', 'iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson');
 
for (var word in mobileKeyWords)
 
{
      if (navigator.userAgent.match(mobileKeyWords[word]) != null){
          if (getCookie("VIEW_TYPE") == "PC")    {
              location.href = "/main.html"; // PC용 페이지
           }
           else  {
              location.href = "/mobile/index.html"; // 모바일용 페지지
           }
      }
}