最近用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判断当前设备的更多相关文章

  1. JS判断访问设备、客户端操作系统类型

    先给出一个实例:判断windows.linux.android 复制以下代码另存为html文件即可. <html> <head> <title>判断操作系统< ...

  2. JS判断当前设备是 PC IOS Andriod

    JS判断当前设备是 PC IOS Andriod <script > window.onload = function(){ var isPc = IsPC(); var isAndroi ...

  3. [转]JS判断访问设备、客户端操作系统类型

    本文转自:http://www.cnblogs.com/duanguyuan/p/3534470.html 先给出一个实例:判断windows.linux.android 复制以下代码另存为html文 ...

  4. JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)

    //平台.设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platfor ...

  5. PHP和js判断访问设备是否是微信浏览器实例

    PHP和js判断访问设备是否是微信浏览器实例,代码非常精简,适合新手学习. js判断是否是微信浏览器: 1 function is_weixin() { 2 var ua = window.navig ...

  6. JS判断移动设备最佳方法 并实现跳转至手机版网页

    我在开发的Magento或Wordpress主题时,通过都会制作手机版本,为了实现某个片段在手机端和桌面端不同功能,又或者如果是手机设备,就跳转到指定的网页上,那么这里就需要用到JS来做判断了,下面有 ...

  7. JS判断移动设备最佳方法

    最实用的还是下面这个: 方法一:纯JS判断 使用这方法既简单,又实用,不需要引入jQuery库,把以下代码加入到<head>里即可. <script type=”text/javas ...

  8. js 判断移动设备、pc端、android、iPhone、是否为微信、微博、qq空间

    varbrowser = {   versions: function () {      var u = navigator.userAgent, app = navigator.appVersio ...

  9. js判断移动设备

    在开发中可能需要去判断用户的设备重定向到相应的网址: 1. 判断 iPhone  Android  iPod if((navigator.userAgent.match(/iPhone/i))||(n ...

随机推荐

  1. Tomcat使用,部署

    Tomcat服务器基本使用 web服务软件,也叫web服务器软件,web服务器. 基本使用 1)下载 到apache官网下载. http://www.apache.org 安装版本:window  e ...

  2. jsp+servlet 中文乱码问题

    一. 由于doget和dopost的处理方式不同,在做servlet的时候遇到这样一个问题:用doPost获得的参数只要加上“request.setCharacterEncoding("ut ...

  3. 前端构建 build 技术 nodejs gulp

    https://www.sitepoint.com/introduction-gulp-js/ 参照这个例子做一遍,就会明白,中间会有个问题 npm install jshint 需要修正为 npm ...

  4. Dev用于界面按选中列进行分组统计数据源(实用技巧)

    如果有用U8的可以明白这个功能就是模仿他的统计功能.我不过是把他造成通用的与适应于DEV的. (效率为6000条数据分组统计时间为3秒左右分组列过多5秒.1000条以下0.几秒,500条下0.00几秒 ...

  5. EditPlus 3.7.164 中文版(4月3日更新)

    新的版本汉化了之前无法汉化的部分内容,并修复了旧汉化版的部分问题. 欢迎下载新的翻译文件.

  6. JQuery常用方法一览

    $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/ ...

  7. 怎么通过 Mysql 实现数据同步呢?

    怎么使 mysql 数据同步先假设有主机 A 和 B ( linux 系统),主机 A 的 IP 分别是 1.2.3.4 (当然,也可以是动态的),主机 B 的 IP 是 5.6.7.8 .两个主机都 ...

  8. html标签快速转换思想方法

    function htmlencode(s){ var div = document.createElement('div'); div.appendChild(document.createText ...

  9. socket(二)

    作用域 1 2 3 if 1 == 1:  ​   name = 'alex' print(name) python中是没有块儿作用域的,所以python可以输出name java/c中有块级作用域, ...

  10. 阅读笔记 火球UML大战需求分析3

    在复习回顾的以前所学的UML 统一建模语言之后,要将他们融会贯通起来,必定要进行一次事件,这样才能更好地运用各种UML,所以,了解了所有的UML图之后,就要开始接收一个练习的项目了. 这里作者给的例子 ...