navigator는 브라우저에 대한 정보를 제공
| 속성 | 설명 |
| appCodeName | 브라우저의 코드명을 제공 |
| appName | 브라우저의 이름을 제공 |
| appVersion | 브라우저의 기본 버전과 실행 중인 플랫폼 정보를 제공 |
| userAgent | 브라우저의 전체적인 정보를 제공 |
<script type="text/javascript">
document.write("코드명 : "+navigator.appCodeName+"<br>");
document.write("브라우저명 : "+navigator.appName+"<br>");
document.write("플랫폼 버전 :"+navigator.appVersion+"<br>");
document.write("전체정보 : "+navigator.userAgent+"<br>");
</script>
<script type="text/javascript">
var myAgent=navigator.userAgent.toLowerCase();
var mobile=["iphone","ipod","android","blackberry","window ce","nokia","webos","opera mine","sonyericsson","opera mobi","iemobile"];
for(var i=0; i<mobile.length;i++){
document.write(myAgent+"<br>");
document.write(mobile[i]+"<br>");
document.write(myAgent.indexOf(mobile[i])+"<br>");
}
</script>
http://comlearn.co.kr/ex/expc.html
userAgent를 이용한 모바일 변경
<script type="text/javascript">
var myAgent=navigator.userAgent.toLowerCase();
var mobile=["iphone","ipod","android","blackberry","window ce","nokia","webos","opera mine","sonyericsson","opera mobi","iemobile"];
for(var i=0; i<mobile.length;i++){
if(myAgent.indexOf(mobile[i])>=0){
location.href="http://m.naver.com";
break;
}
}
</script>
</head>
<body>
<h1>PC버전 페이지</h1>
</body>
하나의 주소로 입력했을 때 pc버전페이지와 모바일버전 페이지를 구분해서 표시하는 방법
기본 페이지( main.html)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>pc mobile</title>
<script type="text/javascript">
var myAgent=navigator.userAgent.toLowerCase();
//기기의 환경(navigator.userAgent)의 값을 myAgent에 저장
//toLowerCase는 모든 문자열을 소문자로 변경
var mobile=["iphone","ipod","android","blackberry","window ce","nokia","webos","opera mine","sonyericsson","opera mobi","iemobile"];
// mobile 변수의 공간에 환경의 값과 비교할 값을 저장
//[], 배열공간
for(var i=0; i<mobile.length;i++){
//반복( 초기값=0; 최종값(mobile의 개수만큼); 증가값(1씩 증가) )
if(myAgent.indexOf(mobile[i])>=0){
//indexOf(mobile[i])은 배열공간의 위치값을 가지고 찾는다.
location.href="m.html";
//모바일에 접속되었다면 접속할 페이지 주소
break;
}
}
</script>
</head>
<body>
<h1>pc페이지</h1>
</body>
</html>
모바일 페이지( mo.html )
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>모바일</title>
</head>
<body>
<p>모바일 버전</p>
<p>모바일 버전</p>
<p>모바일 버전</p>
<p>모바일 버전</p>
<p>모바일 버전</p>
<p>모바일 버전</p>
</body>
</html>