一個地址或二維碼自動識別設備,並跳轉到各自相應的下載地址,兼容微信

如題,之前都是給客戶提供安卓和iOS兩個二維碼,實在以爲麻煩,就是一勞永逸了一下。不會傳附件,須要相關素材的能夠私我。javascript

 1 <html>
 2 <head>
 3 <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui">
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>下載 Space X APP</title>
 6 <script language="javascript" type="text/javascript">
 7     window.onload = function(){  8         //下載地址,下面三個編寫需根據需求修改
 9         var androidurl = "http://192.168.18.83:8080/testweb/abc.apk"; 10         var iosurl = "https://itunes.apple.com/cn/app/id1165700634?mt=8"; 11         var appname = "點擊下載"+"Space X"; 12         
13         //設置下載地址到下載連接
14         document.getElementById('appname').innerHTML = appname; 15         document.getElementById('admanual').href = androidurl; 16         document.getElementById('iosmanual').href = iosurl; 17         //判斷瀏覽器
18         var u = navigator.userAgent.toLowerCase();//獲取判斷用的對象,不區分大小寫
19         var uA = navigator.userAgent;//獲取判斷用的對象,區分大小寫
20         var isandroid = uA.indexOf('Android') > -1 || uA.indexOf('Adr') > -1; //android終端
21         var isios = !!uA.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
22         if(isios){//iOS系統
23             window.location.href = iosurl; 24         }else if(isandroid){//安卓系統
25             if(u.match(/MicroMessenger/i)=="micromessenger"){ 26                 //若是是微信,安卓則提示在瀏覽器中打開
27                 document.getElementById('downloadmsg').innerHTML='請點擊右上角圖標,在瀏覽器中打開。'; 28                 document.getElementById('downloadmsg').style.cssText="font-size: 1.4rem; text-align: right;;display: block;"; 29                 //顯示箭頭
30                 document.getElementById('weixinjiantou').innerHTML='<img src="箭頭@2x.png" width="40"/>'; 31                 document.getElementById('weixinjiantou').style.cssText="font-size: 1.4rem; text-align: right;;display: block; padding-right:5%;"; 32             }else{ 33                 //若是不是微信,安卓跳轉下載
34                 window.location.href = androidurl; 35  } 36         }else{//不是手機?
37             document.getElementById('downloadmsg').innerHTML = "請手機瀏覽器中打開進行下載。"; 38             document.getElementById('downloadmsg').style.cssText="font-size: 1.4rem; text-align: center;display: block;padding-top: 10%"; 39             document.getElementById('apppic').style.cssText="background-repeat: no-repeat; background-size:414px 736px;background-position:center"; 40             document.getElementById('maintable').style.cssText="margin-top:5%"; 41  } 42  } 43 </script>
44 </head>
45 <body id="apppic" background="背景.png" style="background-size:100% 100%;">
46 <span id="weixinjiantou"></span>
47 <span id="downloadmsg"></span>
48 
49 <table id="maintable" align="center" style="margin-top: 20% ">
50 <tr>
51     <td style="text-align: center;">
52     <span id="appname" style="font-size: 1.4rem;"></span>
53     </td>
54 </tr>
55 <tr>
56     <td style="text-align: center;">
57     <a href="#" id="iosmanual" target="_blank"><img src="iOS按鈕@2x.png"  style="width: 70%;"></img></a>
58     </td>
59 </tr>
60 <tr>
61     <td style="text-align: center;margin-top: 10px; ">
62     <a href="#" id="admanual" target="_blank"><img src="Android按鈕@2x.png" style="width: 70%;"></img></a>
63     </td>
64 </tr>
65 </table>
66 </body>
67 </html>
相關文章
相關標籤/搜索