利用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通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
layui实现给某一列加点击事件
Oct 26 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 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
模板引擎正则表达式调试小技巧
2011/07/20 PHP
php调用shell的方法
2014/11/05 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
Python的面向对象思想分析
2015/01/14 Python
Python中用Spark模块的使用教程
2015/04/13 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
详解python之协程gevent模块
2018/06/14 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
利用python绘制正态分布曲线
2021/01/04 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
.NET remoting的两种通道是什么
2016/05/31 面试题
八年级英语教学反思
2014/01/09 职场文书
户外婚礼策划方案
2014/02/08 职场文书
教师读书活动总结
2014/05/07 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电