JQ实现判断iPhone、Android设备

时间：2024-03-06 18:59:21

最近做了一版微信宣传页，通过JQ来判断设备，并进行下载

微信内置浏览器对下载链接进行了屏蔽，所以先进行判断，如果是微信内置浏览器，则跳转应用宝链接，如果不是，则判断是iPhone/Adroid/PC 并进行跳转

代码如下：

function downloadApp(){
 	var u = navigator.userAgent; 
 	var ua = navigator.userAgent.toLowerCase(); 
	var isAndroid = u.indexOf(\'Android\') > -1 || u.indexOf(\'Adr\') > -1; //android终端 
	var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
 	if(ua.match(/MicroMessenger/i)=="micromessenger") {  //微信内置浏览器
		$(".download a").click(function(){
			window.location.href=\'http://a.app.qq.com/o/simple.jsp?pkgname=应用名 \'
		});
 	}else{
 		if(isiOS){
		
			$(".download a").click(function(){
				window.location.href=\'https://itunes.apple.com/cn/app/应用名\'
			});
		}else if(isAndroid){
			$(".download a").click(function(){
				window.location.href=\'http://a.app.qq.com/o/simple.jsp?pkgname=应用名\'
			});
		}else{
			$(".download a").click(function(){
				window.location.href=\'应用链接\'
			});
		}
	}
	
 }

测试发现，<a>标签里竟然出现了 需要点击二次才能跳转的情况，所以进行完善，而且发现已经在时间上绑定了click事件 还包在函数里 好像有点多此一举。。

$(function(){
	var u = navigator.userAgent; 
 	var ua = navigator.userAgent.toLowerCase(); 
	var isAndroid = u.indexOf(\'Android\') > -1 || u.indexOf(\'Adr\') > -1; //android终端 
	var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
 	if(ua.match(/MicroMessenger/i)=="micromessenger") {   //微信内置浏览器+应用宝链接
		$(".download a").bind(\'touchstart\', function (event) {
			window.location.href=\'http://a.app.qq.com/o/simple.jsp?pkgname=应用名 \'
		});
 	}else{
 		if(isiOS){
			$(".download a").bind(\'touchstart\', function (event) {
				window.location.href=\'https://itunes.apple.com/cn/app/应用名\'
				
			});
		}else if(isAndroid){
			$(".download a").bind(\'touchstart\', function (event) {
				window.location.href=\'http://a.app.qq.com/o/simple.jsp?pkgname=应用名\'
				
			});
		}else{  //PC 端
			$(".download a").click(function(){
				window.location.href=\'应用链接\'
			});
		}
	
	}
	
});

　　

相关文章