这个功能其实主要针对下载功能来说的,
安卓下载地址肯定和ios下载地址不一样,
如何在不同设备访问下载地址时就能根据用户的设备进行相应的跳转。
同时,微信访问的地址如果是下载地址的话,微信本身是会屏蔽跳转的。
需要识别微信,并给出提示用其他浏览器打开此网址。
代码很简单。完整代码如下:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <html><head><title>自动识别设备</title> 3 <meta content="text/html; charset=unicode" http-equiv=Content-Type> 4 <meta name=viewport content="width=device-width, initial-scale=1.0"> 5 <meta name=GENERATOR content="MSHTML 11.00.9600.17496"> 6 <style> 7 *{ margin: 0; padding: 0; } 8 body{ background: #FFFFFF; } 9 img{display: block;width: 100%;vertical-align: middle;} 10 </style> 11 <script> 12 function detectOS() { 13 var osUserAgent = navigator.userAgent.toLowerCase(); 14 if (osUserAgent.indexOf("iphone") > -1 || osUserAgent.indexOf("ipad") > -1 || osUserAgent.indexOf("ipod") > -1) { 15 if (osUserAgent.indexOf("micromessenger") > -1) { 16 return "wechat"; 17 } 18 //alert("注意:只限越狱用户可安装"); 19 top.location.href = ‘http://www.apple.com/‘; 20 return "iphone"; 21 } 22 if (osUserAgent.indexOf("android") > -1 || osUserAgent.indexOf("adr") > -1) { 23 if (osUserAgent.indexOf("micromessenger") > -1) { 24 return "wechat"; 25 } 26 top.location.href = ‘http://www.baidu.com‘; 27 return "android"; 28 } 29 if (osUserAgent.indexOf("win") > -1) { 30 top.location.href = ‘http://www.baidu.com‘; 31 return "windows"; 32 } 33 return osUserAgent; 34 } 35 detectOS(); 36 </script> 38 </head> 39 <body> 40 <p><img src="http://img.m.duoku.com/cimages/img/20444/20444.png" /></p> 41 </body> 42 </html>
三个if语句实现查询:ios、Android、还是win(pc) ,
在 ios和Android的语句中加入了
if (osUserAgent.indexOf("micromessenger") > -1) { return "wechat"; }
验证是否是在微信中打开的,如果不需要此功能可以删去。
top.location.href = ‘http://www.apple.com/‘;即为相应设备的跳转地址。
最后 body里面有一张图片,当为微信访问时,显示此图片,图片内容为提示用其他浏览器打开。