博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js判断当前设备
阅读量:7242 次
发布时间:2019-06-29

本文共 2724 字,大约阅读时间需要 9 分钟。

最近用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的函数,这样就搞定了。

转载于:https://www.cnblogs.com/MirageFox/p/6002252.html

你可能感兴趣的文章
PowerDesigner Comment与Name相互替换
查看>>
(二) JPA基础
查看>>
(四)Centos之查询目录中内容命名ls
查看>>
压缩 KVM 的 qcow2 镜像文件
查看>>
紫书 例题 10-26 UVa 11440(欧拉函数+数论)
查看>>
DDOS攻击攻击种类和原理
查看>>
Redis的应用场景
查看>>
数据需求统计常用awk命令
查看>>
绘图: matplotlib核心剖析
查看>>
CodeForces 660A Co-prime Array
查看>>
PAT (Advanced Level) 1109. Group Photo (25)
查看>>
Dubbo+Zookeeper平台的搭建
查看>>
diff 比较两个文件的差异
查看>>
将 纯真ip数据库|QQ IP数据库 转为SQL,ACCESS
查看>>
JavaScript的错误处理
查看>>
iframe 从父像子穿参数(前端网备份)
查看>>
工厂方法模式 创建型 设计模式(三)
查看>>
有梦想就有未来!
查看>>
SpringMVC自定义视图
查看>>
linux创建日期文件名
查看>>