利用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 程序库的比较(一)之DOM功能
Apr 07 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
js中延迟加载和预加载的具体使用
Jan 14 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
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
php判断一个数组是否为有序的方法
2015/03/27 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
python统计文章中单词出现次数实例
2020/02/27 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
奶茶专卖店创业计划书
2014/01/18 职场文书
效能风暴心得体会
2014/09/04 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
九年级英语教学反思
2016/02/15 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
mysql的单列多值存储实例详解
2022/04/05 MySQL
OpenFeign实现远程调用
2022/08/14 Java/Android