利用JS判断客户端类型你应该知道的四种方法


Posted in Javascript onDecember 22, 2017

前言

我们在写响应式布局的时候,总要考虑是否是移动端,基于这个这里总结了4种方法判断客户端是否是ios或者android。分享出来供大家参考学习,下面随着小编来一起看看详细的介绍吧。

利用JS判断客户端类型你应该知道的四种方法

方法如下:

1. 第一种:通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端

User Agent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA。它是一个特殊字符串头,是一种向访问网站提供你所使用的浏览器类型及版本、操作系统及版本、浏览器内核、等信息的标识。通过这个标 识,用户所访问的网站可以显示不同的排版从而为用户提供更好的体验或者进行信息统计;例如用手机访问谷歌和电脑访问是不一样的,这些是谷歌根据访问者的 UA来判断的。UA可以进行伪装。

浏览器的UA字串的标准格式:浏览器标识 (操作系统标识; 加密等级标识; 浏览器语言) 渲染引擎标识版本信息。但各个浏览器有所不同。

代码如下:

<script type="text/javascript">
 var u = navigator.userAgent;
 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
 alert('是否是Android:'+isAndroid);
 alert('是否是iOS:'+isiOS);
</script>

2. 第二种:检查是否是移动端(Mobile)、ipad、iphone、微信、QQ等。

2.1 代码如下:

<script type="text/javascript">
//判断访问终端
var browser={
 versions:function(){
  var u = navigator.userAgent, 
   app = navigator.appVersion;
  return {
   trident: u.indexOf('Trident') > -1, //IE内核
   presto: u.indexOf('Presto') > -1, //opera内核
   webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
   gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
   mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
   ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
   android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
   iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
   iPad: u.indexOf('iPad') > -1, //是否iPad
   webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
   weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
   qq: u.match(/\sQQ/i) == " qq" //是否QQ
  };
 }(),
 language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
</script>

2.2 使用方法

/判断是否IE内核
if(browser.versions.trident){ alert("is IE"); }
//判断是否webKit内核
if(browser.versions.webKit){ alert("is webKit"); }
//判断是否移动端
if(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert("移动端"); }

2.3 检测浏览器语言

currentLang = navigator.language; //判断除IE外其他浏览器使用语言
if(!currentLang){//判断IE浏览器使用语言
currentLang = navigator.browserLanguage;
}
alert(currentLang);

3. 判断iPhone|iPad|iPod|iOS|Android客户端

代码如下:

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
 //alert(navigator.userAgent); 
 window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) { //判断Android
 //alert(navigator.userAgent); 
 window.location.href ="Android.html";
} else { //pc
 window.location.href ="pc.html";
};

4. 判断pc还是移动端

代码如下:

<script>
//判断是否手机端访问
 var userAgentInfo = navigator.userAgent.toLowerCase();
 var Agents = ["android", "iphone",
    "symbianos", "windows phone",
    "ipad", "ipod"];
 var ly=document.referrer; //返回导航到当前网页的超链接所在网页的URL
 for (var v = 0; v < Agents.length; v++) {
  if (userAgentInfo.indexOf(Agents[v]) >= 0&&(ly==""||ly==null)) {
   this.location.href='http://m.***.com'; //wap端地址
  }
 }
</script>

5. 常用跳转代码

看代码

<script type="text/javascript">
 // borwserRedirect
 (function browserRedirect(){
  var sUserAgent = navigator.userAgent.toLowerCase();
  var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad';
  var bIsIphone = sUserAgent.match(/iphone os/i) == 'iphone os';
  var bIsMidp = sUserAgent.match(/midp/i) == 'midp';
  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4';
  var bIsUc = sUserAgent.match(/ucweb/i) == 'web';
  var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce';
  var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile';
  var bIsAndroid = sUserAgent.match(/android/i) == 'android';
  var pathname = location.pathname
  if(bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM || bIsAndroid ){
  window.location.href = 'http://m.geekjc.com'+pathname; //wap端地址
  }
 })();
 </script>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
JavaScript伪数组用法实例分析
Dec 22 #Javascript
JavaScript中Object值合并方法详解
Dec 22 #Javascript
Angular简单验证功能示例
Dec 22 #Javascript
Angular实现的table表格排序功能完整示例
Dec 22 #Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 #Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 #Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 #Javascript
You might like
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
PHP 得到根目录的 __FILE__ 常量
2008/07/23 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
javascript 得到变量类型的函数
2010/05/19 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
JS实现电商放大镜效果
2017/08/24 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
python爬取微信公众号文章
2018/08/31 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
python实现发送邮件
2021/03/02 Python
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
采购部主管岗位职责
2014/01/01 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
小学课外阅读总结
2014/07/09 职场文书
2015年科室工作总结
2015/04/10 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
施工现场安全管理制度
2015/08/05 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书