브라우저 확인 스크립트 > navigator.userAgent를 이용한 모바일 접속 확인 방법

브라우저 확인 스크립트(navigator.userAgent)를 이용하여 모바일과 PC 접속에 따라 원하는 결과를 출력할 수 있습니다. 브라우저 확인 스크립트는 "navigator"를 이용하여 다양한 정보를 확인할 수 있습니다. 일반적으로 사용하는 속성은 "userAgent, appName, appVersion, appCodeName, platform"이 있으며, 한 번에 많은 정보를 보여주는 'userAgent'를 자주 사용하게 됩니다. 사용자 에이전트(user-Agent)는 서버 단에서 주로 사용하고 있습니다.

개인 서버 및 호스팅을 이용하고 설치형 CMS를 이용한다면 서버 단에서 제어할 수 있겠지만, 서비스형 티스토리 블로그 같은 경우는 접근·제어할 수 있는 권한이 없기에, 사용자가 사용할 수 있는 HTML 내부에서 스크립트를 활용하는 방법이 있습니다.

응용의 한계를 뛰어넘는다면 다양한 방법으로 활용 가능 하겠으나, 개인적으로는 모바일 접속 여부를 확인하여 PC에서 접속할 경우는 아무런 작동을 하지 않고, 모바일 접속일 경우에만 모바일에 맞는 결과를 출력하기 위해 사용하고 있습니다.

/* 모바일과 PC 구분 스크립트가 필요하시다면 그대로 사용하셔도 됩니다. */

<script>
// 재활용을 위해 "hackerc_Agent" 에 정보를 저장.
var hackerc_Agent=navigator.userAgent;

// (.match)를 이용하여 해당 단어(키워드)가 포함될 경우 만족하는 if문 적용.
if(hackerc_Agent.match('LG | SAMSUNG | Samsung | iPhone | iPod | Android | Windows CE | BlackBerry | Symbian | Windows Phone | webOS | Opera Mini | Opera Mobi | POLARIS | IEMobile | lgtelecom | nokia | SonyEricsson')!=null){document.write("모바일")}
</script>

/* "해커 C 이야기" 블로그의 애널리틱스 로그 정보를 활용하여, 2009년 10월부터 2014년 11월까지 1회 이상 접속이 이뤄진 모바일 기기를 기준으로 하였습니다. */

해커씨 블로그를 기준 잡았기 때문에, 다른 기기의 정보를 추가하거나 삭제한다면, 본인의 블로그에 딱 맞는 커스텀 스크립트를 사용할 수 있습니다. 티스토리에서 반응형 웹을 이용하시는 경우에 나름 유용하게 활용하실 수 있을 겁니다.

모두 멋진 티스토리 블로그를 만들어보세요.

브라우저 확인 스크립트(navigator.userAgent)