利用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 parseInt字符转化为数字函数使用小结
Nov 05 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
深入理解js generator数据类型
Aug 16 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 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
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
python3调用windows dos命令的例子
2019/08/14 Python
python实现广度优先搜索过程解析
2019/10/19 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
pandas中ix的使用详细讲解
2020/03/09 Python
Python基于locals返回作用域字典
2020/10/17 Python
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
工商管理系学生的自我评价分享
2013/11/29 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
2016年元旦主持词
2015/07/06 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android