js判断当前设备
最近用bootstrap做自适应,发现仍然很难很好的兼容web端和PC端的现实。
仔细观察百度,淘宝,京东等大型网站,发现这些网站都有对应不同客户端的子站。
例如:
| 站点 | PC端url | web端url |
|---|---|---|
| 百度 | www.baidu.com | m.baidu.com |
| 淘宝 | www.taobao.com | m.taobao.com |
| 京东 | www.jd.com | m.jd.com |
| 网易 | www.163.com | 3g.163.com |
虽然对应不同的客户端做了不同的页面,但如何得知用户当前用的什么呢?
通过度娘找到了一套简单易理解的js代码
/*判断当前设备跳转到指定地址。PCurl:PC端地址;WebUel:PC端地址;*/
function judgmentClient(PCurl,WebUel){
var UserClient = navigator.userAgent.toLowerCase();
var IsIPad = UserClient.match(/ipad/i) == "ipad";
var IsIphoneOs = UserClient.match(/iphone os/i) == "iphone os";
var IsMidp = UserClient.match(/midp/i) == "midp";
var IsUc7 = UserClient.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var IsUc = UserClient.match(/ucweb/i) == "ucweb";
var IsAndroid = UserClient.match(/android/i) == "android";
var IsCE = UserClient.match(/windows ce/i) == "windows ce";
var IsWM = UserClient.match(/windows mobile/i) == "windows mobile";
if(IsIPad || IsIphoneOs || IsMidp || IsUc7 || IsUc || IsAndroid || IsCE || IsWM){
window.location = WebUel;
}else{
window.location = PCurl;
}
}
这套代码虽然可以直接使用,但会有个调用的问题。
假设现有一个PC页 和 一个Web页,这两个页面onload的时候都调用这个函数,结果是反复调用此函数,页面不停刷新。(有兴趣的朋友可以自行尝试)
起初这个调用bug想了两个小时就是绕不出来。(本菜有点愚钝)
后来终于想明白了,其实就是把这个拆开成两个函数,分开调用就OK了。
// PC端调用判断web设备
function PCjudgment(WebUel){
var UserClient = navigator.userAgent.toLowerCase();
var IsIPad = UserClient.match(/ipad/i) == "ipad";
var IsIphoneOs = UserClient.match(/iphone os/i) == "iphone os";
var IsMidp = UserClient.match(/midp/i) == "midp";
var IsUc7 = UserClient.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var IsUc = UserClient.match(/ucweb/i) == "ucweb";
var IsAndroid = UserClient.match(/android/i) == "android";
var IsCE = UserClient.match(/windows ce/i) == "windows ce";
var IsWM = UserClient.match(/windows mobile/i) == "windows mobile";
if(IsIPad || IsIphoneOs || IsMidp || IsUc7 || IsUc || IsAndroid || IsCE || IsWM){
window.location = WebUel;
}
}
// web端调用判断PC设备
function Webjudgment(pcUel){
var UserClient = navigator.userAgent.toLowerCase();
var IsIPad = UserClient.match(/ipad/i) == "ipad";
var IsIphoneOs = UserClient.match(/iphone os/i) == "iphone os";
var IsMidp = UserClient.match(/midp/i) == "midp";
var IsUc7 = UserClient.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var IsUc = UserClient.match(/ucweb/i) == "ucweb";
var IsAndroid = UserClient.match(/android/i) == "android";
var IsCE = UserClient.match(/windows ce/i) == "windows ce";
var IsWM = UserClient.match(/windows mobile/i) == "windows mobile";
if(!IsIPad && !IsIphoneOs && !IsMidp && !IsUc7 && !IsUc && !IsAndroid && !IsCE && !IsWM){
window.location = pcUel;
}
}
pc端调用pc的函数,web端调用web的函数,这样就搞定了。
js判断当前设备的更多相关文章
- JS判断访问设备、客户端操作系统类型
先给出一个实例:判断windows.linux.android 复制以下代码另存为html文件即可. <html> <head> <title>判断操作系统< ...
- JS判断当前设备是 PC IOS Andriod
JS判断当前设备是 PC IOS Andriod <script > window.onload = function(){ var isPc = IsPC(); var isAndroi ...
- [转]JS判断访问设备、客户端操作系统类型
本文转自:http://www.cnblogs.com/duanguyuan/p/3534470.html 先给出一个实例:判断windows.linux.android 复制以下代码另存为html文 ...
- JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)
//平台.设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platfor ...
- PHP和js判断访问设备是否是微信浏览器实例
PHP和js判断访问设备是否是微信浏览器实例,代码非常精简,适合新手学习. js判断是否是微信浏览器: 1 function is_weixin() { 2 var ua = window.navig ...
- JS判断移动设备最佳方法 并实现跳转至手机版网页
我在开发的Magento或Wordpress主题时,通过都会制作手机版本,为了实现某个片段在手机端和桌面端不同功能,又或者如果是手机设备,就跳转到指定的网页上,那么这里就需要用到JS来做判断了,下面有 ...
- JS判断移动设备最佳方法
最实用的还是下面这个: 方法一:纯JS判断 使用这方法既简单,又实用,不需要引入jQuery库,把以下代码加入到<head>里即可. <script type=”text/javas ...
- js 判断移动设备、pc端、android、iPhone、是否为微信、微博、qq空间
varbrowser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersio ...
- js判断移动设备
在开发中可能需要去判断用户的设备重定向到相应的网址: 1. 判断 iPhone Android iPod if((navigator.userAgent.match(/iPhone/i))||(n ...
随机推荐
- c++的引用
/*#include"iostream"using namespace std;void any_function(int & p);//声明函数any_function/ ...
- python numpy包
在numpy包中我们可以用数组来表示向量,矩阵和高阶数据结构 首先导入numpy包: from numpy import* 初始化numpy数组有多种方式,比如说 1.python列表或元祖 2.使用 ...
- Linux启用和配置Java
Firefox 在安装 Java 平台时,Java 插件文件将作为该安装的一部分包含在内.要在 Firefox 中使用 Java,您需要从该发行版中的插件文件手动创建符号链接指向 Firefox 预期 ...
- 索尼Sony ATI显卡驱动 Win7 Win8 Win8.1 视频黑屏 解决方法
索尼ATI显卡驱动 Win7 Win8 Win8.1 视频 黑屏 完美解决方法: 下载这个补丁 安装 即可 解决 ! baidu pan: http://pan.baidu.com/s/1gd ...
- centos下安装java8
http://tecadmin.net/install-java-8-on-centos-rhel-and-fedora/#
- vmware workstation unrecoverable error: (vmui)报错解决方法
实验室7月份刚换了电脑,之前一直用vmware来跑linux搞嵌入式开发,无论是宿舍的笔记本,还是之前用的旧台式机,都可以妥妥的跑vmware没有问题,结果换了新电脑之后,装上vmware works ...
- rabbimq连接问题处理
今天遇到一个rabbitmq的连接问题,之前自己写代码测试的时候并没有出现过,所以做个小总结,由于是其他项目测试部署环境发现的问题,所以一开始排查还是有点坑... 客户端上新建一个rabbitmq的c ...
- thinkPHP 5.0.x 使用SQLite3 进行缓存设置 Cache
1. 配置 thinkPHP cache [application/config.php] 把type设置为sqlite3(默认是小写,第一个字母不区分大小写) 把path换成db,并指定sqlite ...
- session原理及实现共享
一.session的本质http协议是无状态的,即你连续访问某个网页100次和访问1次对服务器来说是没有区别对待的,因为它记不住你.那么,在一些场合,确实需要服务器记住当前用户怎么办?比如用户登录邮箱 ...
- CentOS7 Nginx负载均衡
五台服务器 192.168.155.129 nginx反向代理服务器 192.168.155.130 apache+PHP服务器,PHP要使用mysql函数库,配置的时候就要指定mysql安装路径,所 ...