zoukankan      html  css  js  c++  java
  • JQ实现判断iPhone、Android设备

    最近做了一版微信宣传页,通过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='应用链接'
    			});
    		}
    	
    	}
    	
    });
    

      

  • 相关阅读:
    Struts2框架的学习遇到的问题1
    博客开通第100天
    RTK(Real Time Kinematic)实时动态差分定位技术
    HSRP 协议/ VRRP 协议(热备份路由协议)
    PKI 公钥基础设施
    路由器的工作原理
    VLAN基础知识
    Linux系统的 粘滞位、sgid和suid
    Kali Linux三步安装中文输入法(极简)
    ACL 包过滤技术
  • 原文地址:https://www.cnblogs.com/chaoli/p/5871309.html
Copyright © 2011-2022 走看看