[방법 #1]
var agt = navigator.userAgent.toLowerCase();
if (agt.indexOf("chrome") != -1) return 'Chrome';
if (agt.indexOf("opera") != -1) return 'Opera';
if (agt.indexOf("staroffice") != -1) return 'Star Office';
if (agt.indexOf("webtv") != -1) return 'WebTV';
if (agt.indexOf("beonex") != -1) return 'Beonex';
if (agt.indexOf("chimera") != -1) return 'Chimera';
if (agt.indexOf("netpositive") != -1) return 'NetPositive';
if (agt.indexOf("phoenix") != -1) return 'Phoenix';
if (agt.indexOf("firefox") != -1) return 'Firefox';
if (agt.indexOf("safari") != -1) return 'Safari';
if (agt.indexOf("skipstone") != -1) return 'SkipStone';
if (agt.indexOf("msie") != -1) return 'Internet Explorer';
if (agt.indexOf("netscape") != -1) return 'Netscape';
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';
var trident = navigator.userAgent.match(/Trident\/(\d.\d)/i);
if(trident != null && trident[1] == "6.0"){
alert('IE10 입니다.');
} else{
alert('IE9 이하 입니다.');
}
[방법 #2]
IE8을 고려해야하는 상황이라면 좀 더 유연하게 브라우저를 제어할 수 있습니다.
하지만 IE6~7을 감지하지 않기 때문에 따로 감지할 수 있는 polyfill이나 사용자 정의 스크립트가 필요한 점이 아쉽습니다.
IE6~7까지 체크를 한 스크립트까지 더한다면 IE 계열때문에 사용하는 조건부 주석문, 아니면 CSS Hack과 같은 것에 의존할 필요가 전혀 없게 됩니다.
예를 들어 디텍타이저는 흔히 조건부 주석문에 사용하는 클래스 방식을 그대로 <html> 요소에 클래스를 추가하여 그 클래스를 사용자가 사용할 수 있도록 정보를 제공해 주도록 할 수 있습니다.
그리고 RWD의 경우에도 mobile, tablet, desktop 클래스명을 이용할 수 있습니다.
다음은 IE계열을 체크하는 코드입니다.
디텍타이저와 함께 사용하면 위의 장점을 그대로 사용할 수 있을 것입니다.
(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;
}
})();
출처 : https://webclub.tistory.com/257
댓글 없음:
댓글 쓰기