[html5] 자바스크립트에서 스마트폰 단말기 정보 확인
자바스크립트에서 웹브라우저(단말)의 종류를 확인하려면 User Agent 값을 조사하면 된다.
1. iPhone/iPad User Agent
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; ko-kr)
AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5
Mozilla/5.0 (iPad; U; CPU iPhone OS 4_2_1 like Mac OS X; ko-kr)
AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5
2. Android 계열
- 갤럭시S
Mozilla/5.0 (Linux; U; Android 2.2.1; ko-kr; SHW-M110S Build/FROYO)
AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
- HTC 디자이어
Mozilla/5.0 (Linux; U; Android 2.2; ko-kr; HTC_DesireHD_A9191 Build/FRF91)
AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
ex1)
<%--
- Description : 단말기종 체크1
--%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device=width,user-scalable=no,initial-scale=1.0,maximum-scale=3.0" />
<title>단말기종 체크</title>
<style>
article, aside, figure, footer, header, hgroup, memu, nav, section { display: block; }
p { font-size: 12px; }
</style>
<script>
var ua = navigator.userAgent;
//iPhone 3.x?
if(ua.indexOf("iPhone OS 3") > 0) {
alert("iPhone 3.x 입니다.");
}
//iPhone 4.x?
else if(ua.indexOf("iPhone OS 4") > 0) {
alert("iPhone 4.x 입니다.");
}
//iPad ?
else if(ua.indexOf("iPad") > 0) {
alert("iPad 입니다.");
}
//Android 1.6 ?
else if(ua.indexOf("Android 1.6") > 0) {
alert("Android 1.6 입니다.");
}
//Android 2.1 ?
else if(ua.indexOf("Android 2.1") > 0) {
alert("Android 2.1 입니다.");
}
//Android 2.2 ?
else if(ua.indexOf("Android 2.2") > 0) {
alert("Android 2.2 입니다.");
}
//Android 2.3 ?
else if(ua.indexOf("Android 2.3") > 0) {
alert("Android 2.3 입니다.");
}
//Android 2.2 ?
else {
alert("버전이 확인되지 않습니다.");
}
</script>
</head>
<body>
<p>오늘은 맑음</p>
<p>오늘은 참 즐거운 날이었다.</p>
</body>
</html>
ex2)
<%--
- Description : 단말기종 체크2
--%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device=width,user-scalable=no,initial-scale=1.0,maximum-scale=3.0" />
<title>단말기종 체크</title>
<style>
article, aside, figure, footer, header, hgroup, memu, nav, section { display: block; }
p { font-size: 12px; }
</style>
<script>
// User Agent에 str이 포함되어 있는지 확인
function _ua(str) {
var ua = navigator.userAgent;
return (ua.indexOf(str) > 0);
}
// iPhone인 경우 true를 반환
function isIPhone() {return _ua("iPhone");}
//iPad인 경우 true를 반환
function isIPad() {return _ua("iPad");}
//Android인 경우 true를 반환
function isAndroid() {return _ua("Android");}
//단말이름을 반화
function getDeviceName() {
if(isIPhone()) { return "iPhone"; }
if(isIPad()) { return "iPad"; }
if(isAndroid()) { return getAndroidDevName(); }
return "unkonwn";
}
// Android의 단말 이름을 반환
function getAndroidDevName() {
var ua = navigator.userAgent;
var regex = /Android (.*);.*;\s*(.*)\sBuild/;
var match = regex.exec(ua);
if(match) {
var ver = match[1];
var dev_name = match[2];
return "Android " + ver + " " + dev_name;
}
return "unknown";
}
// 단말 이름 표시
alert(getDeviceName() + " 입니다.");
document.write(navigator.userAgent);
</script>
</head>
<body>
<p>오늘은 맑음</p>
<p>오늘은 참 즐거운 날이었다.</p>
</body>
</html>
[html5] 자바스크립트에서 스마트폰 단말기 정보 확인
'programming > html5' 카테고리의 다른 글
| [html5] ogg, webm 동영상 변환 (0) | 2012.07.01 |
|---|---|
| [html5] html5 표준 동영상 코덱 (0) | 2012.07.01 |
| [html5] viewport 지정하기 (0) | 2012.05.22 |
| [html5] 스마트폰 화면 크기 (0) | 2012.05.22 |
| [html5] new Audio() 구문 사용법 (0) | 2012.05.21 |