본문으로 바로가기

브라우저 체크(스니핑)

category 웹코딩/App,Plugin 2018.11.01 19:15

브라우저체크를 위한 방법

1. 기능별 체크를 위해 모더나이저를 사용

홈페이지 : https://modernizr.com/

- 원하는 기능 체크들을 선택하고 다운로드 혹은 복사붙여넣기 한다.


2. 브라우저 및 디바이스 체크

홈페이지 : http://baris.aydinoglu.info/Detectizr/

- 모더나이저의 확장기능으로 모더나이저가 필요.

- 모더나이저 삽입후, 디텍티저를 삽입하면 된다.

- IE8까지 체크가 가능하며, 모더나이저처럼 html 요소에 클래스를 붙여준다.


3. IE7 이하도 체크가 필요할 경우

/**
 * --------------------------------
 * 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, ie6 뿐만 아니라 lt-ie9 와 같이 이하 버전을 위한 클래스명도 표기한다.

출처 : http://imagestory.net/?p=693



댓글을 달아 주세요

티스토리 툴바