使用js插件进行设备检测
一、分析新浪网是怎么做的
如新浪网有两种版本,一种是pc版,存放在www.sina.com.cn这个服务器上;另外一种是手机版,存放在www.sina.cn这个服务器上
原理是当用户输入网址www.sina.com.cn的时候,检测用户的设备,如果用户用的是pc,那么留在原地,如果检测用户的设备是手机访问的就跳转到www.sina.cn这个网址去(这样做是因为用户不可能记得住一个网站的那么多网址)
二、怎么检测设备
1、就要用到device.js库(不依赖Jquery),这是一种最简单的一种方法:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>检测设备</title> <!--首先引入device.min.js这个js文件--> <script type="text/javascript" src="device.min.js"></script> </head> <body> <h1 id="title"></h1> <script type="text/javascript"> var myh1 = document.getElementById("title"); if(device.mobile()){ //表示判断设备是否是手机 myh1.innerHTML = "I'm mobile"; }else if(device.ipad()){ //表示判断设备是否是ipad myh1.innerHTML = "I'm ipad"; }else{ myh1.innerHTML = "I'm pc"; } </script> </body> </html>
device.ipad() 返回一个布尔值(true,false),表示用户的设备是否是iPad
device.portrait() 返回一个布尔值(true,false),表示检测设备是否是竖直的
device.landscape() 返回一个布尔值(true,false),表示检测设备是否是水平
device.mobile() 返回一个布尔值(true,false),表示检测设备是否是手机
device.ipad() 返回一个布尔值(true,false),表示检测设备是否是ipad
device.ipod() 检测用户设备是否是 ipod touch
device.iphone() 返回一个布尔值(true,false),表示检测设备是否是iPhone
device.android() 返回一个布尔值(true,false),表示检测设备是否是Android手机
device.tablet() 返回一个布尔值(true,false),表示检测设备是否是大屏手机(7寸以上);
device.androidTablet() 检测用户设备是否是安卓大屏
device.blackberryTablet() 检测用户设备是否是黑莓
2、当检测完设备之后,如果用户使用的是手机设备或者其他设备那么怎么实现跳转呢?
window.location="URL地址"
<!doctype html> <html> <head> <meta charset="utf-8"> <title>检测设备,进行跳转</title> <script type="text/javascript" src="device.min.js"></script> <script type="text/javascript"> //在读下面的程序这里千万不要写window.onload = funciton(){} if(device.mobile()){ window.location="手机网站的网址";//这里当程序读到这里时,如果检测到设备是手机,就直接跳转了,不 }//else if.....如果网站还做了其他的设备的版本那么可以继续判断 </script> </head> <body> <h1 id="title"></h1> </body> </html>
千万不要写在window.onload = funciton(){}中,因为这样表示的是延时调用
我们必须要制作两套站:pc站,手机站。存放在不同的服务器或者文件夹中。通过设备检测来实现自动跳转。也就是说对于普通的用户来说,没有必要去记忆两个网址,只需要记忆一个pc网址即可。
手机中直接输入这个pc网址,比如www.sina.com.cn这个网址,javascript设备检测来实现跳转