利用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 操作select下拉列表框的一点小经验
Mar 20 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
推荐php模板技术[转]
2007/01/04 PHP
也谈php网站在线人数统计
2008/04/09 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
Python3实现Web网页图片下载
2016/01/28 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
python 画图 图例自由定义方式
2020/04/17 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
管理学专业个人求职信范文
2013/09/21 职场文书
大学生优秀的自我评价分享
2013/10/22 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
环保标语大全
2014/06/12 职场文书
新闻发布会策划方案
2014/06/12 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
OpenCV实现普通阈值
2021/11/17 Java/Android
vue router 动态路由清除方式
2022/05/25 Vue.js