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 ...
随机推荐
- [原创]java WEB学习笔记108:Spring学习---基于配置文件的形式实现AOP
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- ASPX开发基础
ASP.NET:.net开发网站应用程序的技术总称,分为WebForm和MVC 表单元素: 文本类:(1)<input type=“text”/> 文本框 (2)<input typ ...
- springmvc中的controller是单例的
今天发现spring3中的controller默认是单例的,若是某个controller中有一个私有的变量a,所有请求到同一个controller时,使用的a变量是共用的,即若是某个请求中修改了这个变 ...
- Unit01: JAVA开发环境
Top JAVA开发环境 1. JAVA开发环境 1.1. 认识Linux操作系统 1.1.1. Linux的由来及发展 Linux起源于1991年,1995年流行起来,大家可以看到旁边的这个人,它就 ...
- Json_异常_net.sf.json.JSONException: JSONObject["solution"] not found.
net.sf.json.JSONException: JSONObject["solution"] not found. 没有这个元素造成的. 问题代码: JSONObject j ...
- jQuery 获取当前节点的html包含当前节点的方法
在开发过程中,jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然后我们有时候确需要,找遍jQuery api文档也没有任何方法可以拿到. 看到有的人通过pare ...
- NIO SelectionKey中定义的4种事件
SelectionKey.OP_ACCEPT —— 接收连接继续事件,表示服务器监听到了客户连接,服务器可以接收这个连接了 SelectionKey.OP_CONNECT —— 连接就绪事件,表示客户 ...
- win2008使用FireDac连接ORACLE数据库问题
2008上装DELPHI XE7,无论用FireDac 还是Ado都连不上ORACLE数据库 --------------------------- Debugger Exception Notifi ...
- 当java出现异常,应如何进行处理
Java异常是一个描述在代码段中发生的异常(也就是出错)情况的对象.当异常情况发生,一个代表该异常的对象被创建并且在导致该错误的方法中被抛出(throw).该方法可以选择自己处理异常或传递该异常.两种 ...
- http 协议集合,超级简单
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Web; ...