1. 程式人生 > >JS判斷手機系統版本為Android或iOS(可識別微信或QQ瀏覽器)

JS判斷手機系統版本為Android或iOS(可識別微信或QQ瀏覽器)

<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<title>JS獲取手機型號和系統</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>  

</head>
<body>
</body>
<script src="js/lib/jquery-1.11.1.min.js"></script>
<script src="js/lib/mobile-detect.min.js"></script>
<script>
	//判斷陣列中是否包含某字串
	Array.prototype.contains = function(needle) {
		for (i in this) {
			if (this[i].indexOf(needle) > 0)
				return i;
		}
		return -1;
	}

	var device_type = navigator.userAgent;//獲取userAgent資訊
	document.write(device_type);//列印到頁面
	var md = new MobileDetect(device_type);//初始化mobile-detect
	var os = md.os();//獲取系統
	var model = "";
	if (os == "iOS") {//ios系統的處理
		os = md.os() + md.version("iPhone");
		model = md.mobile();
	} else if (os == "AndroidOS") {//Android系統的處理
		os = md.os() + md.version("Android");
		var sss = device_type.split(";");
		var i = sss.contains("Build/");
		if (i > -1) {
			model = sss[i].substring(0, sss[i].indexOf("Build/"));
		}
	}
	alert(os + "---" + model);//列印系統版本和手機型號
</script>

<script type="text/javascript">
var browser = {
versions : function() {
var u = navigator.userAgent, app = navigator.appVersion;
return { //移動終端瀏覽器版本資訊 
trident : u.indexOf('Trident') > -1, //IE核心 
presto : u.indexOf('Presto') > -1, //opera核心 
webKit : u.indexOf('AppleWebKit') > -1, //蘋果、谷歌核心 
gecko : u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐核心 
mobile : !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動終端 
ios : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端 
android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 || u.indexOf('Adr') > -1, //android終端或uc瀏覽器 
iPhone : u.indexOf('iPhone') > -1, //是否為iPhone或者QQHD瀏覽器 
iPad : u.indexOf('iPad') > -1, //是否iPad 
webApp : u.indexOf('Safari') == -1,
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
qq: u.indexOf(' QQ') > -1, //是否QQ
//是否web應該程式,沒有頭部與底部 
};
}(),
language : (navigator.browserLanguage || navigator.language)
.toLowerCase()
}
document.writeln("</br>語言版本: " + browser.language);
document.writeln(" </br>是否為移動終端: " + browser.versions.mobile);
document.writeln(" </br>ios終端: " + browser.versions.ios);
document.writeln(" </br>android終端: " + browser.versions.android);
document.writeln(" </br>是否為iPhone: " + browser.versions.iPhone);
document.writeln(" </br>是否iPad: " + browser.versions.iPad);
document.writeln(" </br>是否微信: " + browser.versions.weixin);
document.writeln(" </br>是否QQ: " + browser.versions.qq);
document.writeln(" </br>" +navigator.userAgent);
</script> 

</html>

效果圖:


Android效果圖: