[ Web 관련 ]/자바스크립트

브라우저명과 모바일, PC브라우저 체크

BIZLAB 2018. 10. 26. 12:19

1. 모바일 브라우저라면 모바일 브라우라우저라고 출력하고 PC브라우저라면 PC브라우저라고 출력하기.

2. 브라우저 종류 출력하기


broswerChk.js



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
var broswer = {};
 
broswer.isMobile = function() {
    var tempUser = navigator.userAgent;
    var isMobile = false;
 
    // userAgent 값에 iPhone, iPad, ipot, Android 라는 문자열이 하나라도 존재한다면 모바일로 간주됨.
    if (tempUser.indexOf("iPhone"> 0 || tempUser.indexOf("iPad"> 0
            || tempUser.indexOf("iPot"> 0 || tempUser.indexOf("Android"> 0) {
        isMobile = true;
    }
    return isMobile;
};
 
broswer.isMobileChkPrint = function(isMobileChk) {
    var result = "";
    if (isMobileChk) {
        result = "모바일 웹 브라우저로 접속했습니다.";
    } else {
        result = "PC용 웹 브라우저로 접속했습니다.";
    }
    return result;
};
 
//브라우저의 종류 확인
broswer.getBroswerName = function() {
    //userAgent값을 모두 소문자로 변환하여 변수에 대입
    var agt = navigator.userAgent.toLowerCase();
    
    if(agt.indexOf("chrome"!= -1) {
        return 'Chrome';
    }
    else if(agt.indexOf("opera"!= -1) {
        return 'Opera';
    }
    else if(agt.indexOf("firefox"!= -1) {
        return 'Firefox';
    }
    else if(agt.indexOf("safari"!= -1) {
        return 'Safari';
    }
    else if(agt.indexOf("skipstone"!= -1) {
        return 'Skipstone';
    }
    //msie는 Expolrer 11d이전 버전, trident는 Explorer 11버전
    else if(agt.indexOf("msie"!= -1 || agt.indexOf("trident"!= -1) {
        return 'Internet Explorer';
    }
    else if(agt.indexOf("netscape"!= -1) {
        return 'Netscape';
    }
    else {
        return 'Unknown';
    }
};
cs



html 소스


1
2
3
4
5
6
7
<script type="text/javascript" src="broswerChk.js"></script>
<script type="text/javascript">
var isMobileChk= broswer.isMobile();
var resultData =broswer.isMobileChkPrint(isMobileChk);
document.write("<h1> 브라우저명 : " + broswer.getBroswerName() +"</h1>");
document.write("<h1>"+resultData+"</h1>"); 
</script>
cs



결과










출처: http://clairdelunes.tistory.com/31 [거꾸로 바라본 세상]