본문으로 바로가기

Detectizr(디텍타이저) - 디바이스/플랫폼 탐지기능

category Code Lab 9년 전

Detectizr is a Modernizr extension

Detectizr는 Modernizr의 확장 기능으로서 역할을 하는 서드파티(Third Party) 라이브러리입니다.

모더나이저는 신기술만을 체크할 뿐 사용자의 운영체제나 브라우저까지는 체크하지 않기 때문에 이에 대한 보완을 디텍타이저가 맡고 있습니다.

즉, Detectizr는 Modernizr의 플러그인이라고 할 수 있습니다.



Github - Detectizr

cdn - Detectizr


Detectizr가 수행하는 일

  • Device(디바이스)
  • Device Model(디바이스 모델)
  • Screen Size(화면 크기)
  • Operating System(운영 체제)
  • Operating System Version(운영 체제 버전)
  • Browser(브라우저)
  • Browser Version(브라우저 버전)
  • Browser Engine(브라우저 엔진)
  • Browser Plugins(브라우저 플러그인)

위 항목들을 탐지,체크하여 사용자에게 정보를 제공해 줍니다.

이 항목들은 선택 사항으로 탐지를 원하지 않는 항목이 있다면 비활성화 시킬 수도 있습니다.


그리고 탐지(감지)할 수 있는 장치 유형은 다음과 같습니다.

  • TV (스마트TV와 게임콘솔 포함)
  • Mobile (모바일)
  • Tablet(태블릿)
  • Desktop(데스트톱)

위와 같이 TV, 모바일 및 태블릿 장치 모델이 감지되고 있습니다.



Detectizr Usage(디텍타이저 사용방법)

디텍타이저는 모더나이저를 사용하는 라이브러리로써 다음과 같이 구성할 수 있습니다.


Html
<html>
  <head>
    <script src="modernizr.js"></script>
    <script src="detectizr.js"></script>
  </head>
  <body>
    <script>
      Detectizr.detect({detectScreen:false});
    </script>
  </body>
</html>

여기서 주의해야 할 사항은  modernizr.js를 우선적으로 로드해야한다는 점입니다.

어떻게 보면 당연한 말이겠지만 모더나이저의 확장 라이브러리이기 때문에 먼저 modernizr.js 를 인클루드한 후 detectizr.js 를 포함해야 한다는 것입니다.

그리고 위와 같이 디텍타이저를 호출하면 모더나이저가 <html> 요소에 클래스명을 추가하여 사용자에게 정보를 제공하는 것과 같은 방법으로 디텍타이저가 감지한 정보를 클래스명을 통해 확인하실 수 있습니다.


위 그림은 디텍타이저의 탐지결과를 html의 클래스명으로 나타낸 것을 볼 수 있습니다.




Detectizr Advantage

디텍타이저를 사용하면 좋은 점이 무엇이 있을까요?

디텍타이저를 사용하면 일단 단계(점진)적 기능향상을 목표로 하는 프로젝트에 유용하게 사용할 수 있습니다.

IE8을 고려해야하는 상황이라면 좀 더 유연하게 브라우저를 제어할 수 있습니다.

하지만 IE6~7을 감지하지 않기 때문에 따로 감지할 수 있는 polyfill이나 사용자 정의 스크립트가 필요한 점이 아쉽습니다.

IE6~7까지 체크를 한 스크립트까지 더한다면 IE 계열때문에 사용하는 조건부 주석문, 아니면 CSS Hack과 같은 것에 의존할 필요가 전혀 없게 됩니다.

예를 들어 디텍타이저는 흔히 조건부 주석문에 사용하는 클래스 방식을 그대로 <html> 요소에 클래스를 추가하여 그 클래스를 사용자가 사용할 수 있도록 정보를 제공해 주도록 할 수 있습니다.

그리고 RWD의 경우에도 mobile, tablet, desktop 클래스명을 이용할 수 있습니다.


다음은 IE계열을 체크하는 코드입니다. 

디텍타이저와 함께 사용하면 위의 장점을 그대로 사용할 수 있을 것입니다.

JavaScript
/**
 * --------------------------------
 * IE Version Check
 * http://e-rooms.tistory.com/
 * --------------------------------
 */

(function () {

    var UA = navigator.userAgent.toLowerCase();

    // IE7엔 브라우저 엔진명인 Trident가 없고 IE11엔 MSIE란 문자열이 없으므로 두 가지 경우를 다 체크한다.
    if (UA.indexOf('msie') != -1 || UA.indexOf('trident') != -1) {

        var version = 11;
        UA = /msie ([0-9]{1,}[\.0-9]{0,})/.exec(UA);
        if (UA) {
            version = parseInt(UA[1]);
        }

        var classNames = '';
        // IE 8 이하에 html 클래스를 추가한다.
        // IE 9 이상은 detectizr 에서 체크한다.
        if(version <= 8) {
            // ie 라는 공통 클래스도 추가한다.
            classNames += ' ie';
            // 현재 버전 표시를 추가한다.
            classNames += ' ie' + version;
        }

        // 모든 IE에서 lt-ie 버전에 대한 멀티 클래스를 추가한다.
        for (var i = version + 1; i <= 11; i++) {
            classNames += ' lt-ie' + i;
        }

        // 위 코드에서 체크한 클래스를 html 태그에  추가한다.
        document.getElementsByTagName('html')[0].className += classNames;

    }

})();



IE7 버전에서 체크한 결과

위와 같이 조건부 주석문처리 방식으로 클래스를 제어할 수 있습니다.



Related links

  1. 모더나이저 포스팅 보기



Jaehee's WebClub


저작자표시 변경금지

Code Lab카테고리의 다른글

셀렉트박스 디자인 - designed selectBox  (0) 2016.09.29
Modernizr.mq 활용편  (0) 2016.09.29
Modernizr(모더나이저)  (0) 2016.09.29
Accessibility Layer Popup(접근성 레이어 팝업 코드)  (2) 2016.09.29
심플 롤링 배너(생성자 함수) - 단계별 학습 #4  (0) 2016.09.29
댓글
Web Club
블로그 이미지 jaiyah 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바