最近用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代码

  1. /*判断当前设备跳转到指定地址。PCurl:PC端地址;WebUel:PC端地址;*/
  2. function judgmentClient(PCurl,WebUel){
  3. var UserClient = navigator.userAgent.toLowerCase();
  4. var IsIPad = UserClient.match(/ipad/i) == "ipad";
  5. var IsIphoneOs = UserClient.match(/iphone os/i) == "iphone os";
  6. var IsMidp = UserClient.match(/midp/i) == "midp";
  7. var IsUc7 = UserClient.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
  8. var IsUc = UserClient.match(/ucweb/i) == "ucweb";
  9. var IsAndroid = UserClient.match(/android/i) == "android";
  10. var IsCE = UserClient.match(/windows ce/i) == "windows ce";
  11. var IsWM = UserClient.match(/windows mobile/i) == "windows mobile";
  12. if(IsIPad || IsIphoneOs || IsMidp || IsUc7 || IsUc || IsAndroid || IsCE || IsWM){
  13. window.location = WebUel;
  14. }else{
  15. window.location = PCurl;
  16. }
  17. }

这套代码虽然可以直接使用,但会有个调用的问题。

假设现有一个PC页 和 一个Web页,这两个页面onload的时候都调用这个函数,结果是反复调用此函数,页面不停刷新。(有兴趣的朋友可以自行尝试)

起初这个调用bug想了两个小时就是绕不出来。(本菜有点愚钝)

后来终于想明白了,其实就是把这个拆开成两个函数,分开调用就OK了。

  1. // PC端调用判断web设备
  2. function PCjudgment(WebUel){
  3. var UserClient = navigator.userAgent.toLowerCase();
  4. var IsIPad = UserClient.match(/ipad/i) == "ipad";
  5. var IsIphoneOs = UserClient.match(/iphone os/i) == "iphone os";
  6. var IsMidp = UserClient.match(/midp/i) == "midp";
  7. var IsUc7 = UserClient.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
  8. var IsUc = UserClient.match(/ucweb/i) == "ucweb";
  9. var IsAndroid = UserClient.match(/android/i) == "android";
  10. var IsCE = UserClient.match(/windows ce/i) == "windows ce";
  11. var IsWM = UserClient.match(/windows mobile/i) == "windows mobile";
  12. if(IsIPad || IsIphoneOs || IsMidp || IsUc7 || IsUc || IsAndroid || IsCE || IsWM){
  13. window.location = WebUel;
  14. }
  15. }
  16. // web端调用判断PC设备
  17. function Webjudgment(pcUel){
  18. var UserClient = navigator.userAgent.toLowerCase();
  19. var IsIPad = UserClient.match(/ipad/i) == "ipad";
  20. var IsIphoneOs = UserClient.match(/iphone os/i) == "iphone os";
  21. var IsMidp = UserClient.match(/midp/i) == "midp";
  22. var IsUc7 = UserClient.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
  23. var IsUc = UserClient.match(/ucweb/i) == "ucweb";
  24. var IsAndroid = UserClient.match(/android/i) == "android";
  25. var IsCE = UserClient.match(/windows ce/i) == "windows ce";
  26. var IsWM = UserClient.match(/windows mobile/i) == "windows mobile";
  27. if(!IsIPad && !IsIphoneOs && !IsMidp && !IsUc7 && !IsUc && !IsAndroid && !IsCE && !IsWM){
  28. window.location = pcUel;
  29. }
  30. }

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. [原创]java WEB学习笔记108:Spring学习---基于配置文件的形式实现AOP

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  2. ASPX开发基础

    ASP.NET:.net开发网站应用程序的技术总称,分为WebForm和MVC 表单元素: 文本类:(1)<input type=“text”/> 文本框 (2)<input typ ...

  3. springmvc中的controller是单例的

    今天发现spring3中的controller默认是单例的,若是某个controller中有一个私有的变量a,所有请求到同一个controller时,使用的a变量是共用的,即若是某个请求中修改了这个变 ...

  4. Unit01: JAVA开发环境

    Top JAVA开发环境 1. JAVA开发环境 1.1. 认识Linux操作系统 1.1.1. Linux的由来及发展 Linux起源于1991年,1995年流行起来,大家可以看到旁边的这个人,它就 ...

  5. Json_异常_net.sf.json.JSONException: JSONObject["solution"] not found.

    net.sf.json.JSONException: JSONObject["solution"] not found. 没有这个元素造成的. 问题代码: JSONObject j ...

  6. jQuery 获取当前节点的html包含当前节点的方法

    在开发过程中,jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然后我们有时候确需要,找遍jQuery api文档也没有任何方法可以拿到. 看到有的人通过pare ...

  7. NIO SelectionKey中定义的4种事件

    SelectionKey.OP_ACCEPT —— 接收连接继续事件,表示服务器监听到了客户连接,服务器可以接收这个连接了 SelectionKey.OP_CONNECT —— 连接就绪事件,表示客户 ...

  8. win2008使用FireDac连接ORACLE数据库问题

    2008上装DELPHI XE7,无论用FireDac 还是Ado都连不上ORACLE数据库 --------------------------- Debugger Exception Notifi ...

  9. 当java出现异常,应如何进行处理

    Java异常是一个描述在代码段中发生的异常(也就是出错)情况的对象.当异常情况发生,一个代表该异常的对象被创建并且在导致该错误的方法中被抛出(throw).该方法可以选择自己处理异常或传递该异常.两种 ...

  10. http 协议集合,超级简单

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Web; ...