모바일 기기 접속 판별 후 주소 자동 이동하는 방법

2013. 7. 2. 00:14

모바일 기기 접속 판별 후 주소 자동 이동하는 방법

 

이번 포스팅에서는 자바스크립트를 이용해 모바일 기기 접속을 판별해서 원하는 주소로 자동으로 이동시켜주는 방법을 소개해 드리도록 하겠습니다.

 

요즘은 모바일 페이지를 따로 만들어서 모바일로 접속하면 데스크탑 PC로 접속했을 때와 다른 스킨을 보여주는게 추세인 듯 하네요.

 

뭐, 컨텐츠를 이용하는 사람 입장에서는 보기에 좋아서 좋을런지는 모르겠으나 블로그나 사이트를 운영하는 입장에서는 여간 골치아픈 일이 아니네요.

 

특히, 자신에게 루트 권한이 없는 티스토리와 같은 블로그에서는 더욱 골치가 아픕니다.

 

바로 이 모바일 페이지 때문에 중복 컨텐츠 문제가 발생하게 되는 것인데요.

 

아무리 궁리해봐도 티스토리 블로그에서는 이 문제를 해결할 방법이 없는 듯 하네요.

 

혹시 꼼수라도 아시는 분 계시다면 제보 부탁드려요. ^^

 

 

그럼, 지금부터 사용자가 모바일 기기로 접속을 했는지 아닌지를 판별해서 원하는 주소로 이동시켜주는 방법을 설명해 드리도록 할께요.

 

먼저 <head>와 </head> 사이에 자바스크립트 코드를 삽입해 줘야 하니 해당 위치를 찾으세요.

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=euc-8" />

<meta name="viewport" content="user-scalable=auto, initial-scale=1.0, maximun-scale=1.0, minimum-scale=1.0, width= device-width" />

<script type="text/javascript">

function RedirectMobile(url){

    if (url && url.length > 0 && IsMobile())

    window.location = url;

}

function IsMobile(){

    if (DetectUagent("android")) return true;

    else if (DetectUagent("blackberry")) return true;

    else if (DetectUagent("iphone")) return true;

    else if (DetectUagent("opera")) return true;

    else if (DetectUagent("palm")) return true;

    else if (DetectUagent("windows")) return true;

    else if (DetectUagent("generic")) return true;

    else if (DetectUagent("ipad")) return true;

    else if (DetectUagent("ipod")) return true;

    return false;

}

function DetectUagent(name){

    var uagent = navigator.userAgent.toLowerCase();

    if (uagent.search(name) > -1)

    return true;

    else

    return false;

}

RedirectMobile("이동하기를 원하는 도메인 주소");

</script>

</head>

 

위에 녹색으로 표시된 자바스크립트 코드 보이시죠?

 

저 코드를 여러분의 블로그 혹은 사이트의 <head>와 </head> 사이에 적당한 위치에 삽입해 넣으세요.

 

접속하는 모바일 기기 종류를 추가하고자 하신다면 IsMobile() 함수 부분에서 추가해 주시면 됩니다.

 

위 자바스크립트 코드는 스마트폰 혹은 데스트탑 PC 어느 쪽으로 접속을 하든 주소가 자동으로 이동되도록 되어있습니다.

 

위 코드를 호스팅 계정과 티스토리 블로그에 삽입해서 RedirectMobile(url) 함수의 url 부분에 "http://naver.com"를 넣어서 돌려보니 블로그와 사이트에 접속하자마자 네이버로 자동 이동되더군요.

 

만약, 모바일 접속과 데스크탑 접속을 따로 분리하고자 하신다면 IsMobile() 함수에서 [ else if (DetectUagent("windows")) return true; ] 줄을 삭제하면 됩니다.

 

이 줄을 삭제하고 테스트해보니 스마트폰으로 접속을 하면 네이버로 자동 이동되지만 데스크탑 PC로 접속하면 제 블로그나 사이트로 접속이 되네요.

 

이상으로 포스팅을 마치도록 하겠습니다. ^^

 

원문 출처 : googlinfo.com

Posted by Googlinfo