使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)


Posted in Javascript onJanuary 04, 2017

WEB开发中如何通过Javascript来判断终端为PC、IOS(iphone)、Android呢?

可以通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端。

var u = navigator.userAgent;
 isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

下面一个比较全面的浏览器检查函数,提供更多的检查内容,你可以检查是否是移动端(Mobile)、ipad、iphone、微信、QQ等。

<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>

使用方法:

//判断是否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("移动端"); }
检测浏览器语言
currentLang = navigator.language; //判断除IE外其他浏览器使用语言
if(!currentLang){//判断IE浏览器使用语言
 currentLang = navigator.browserLanguage;
}
alert(currentLang);

上面只是平时用的最多的一种方法,其实还有第二种方法:

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

不同的终端设备采用不同的响应策略,具体场景灵活运用把哈哈。

以上所述是小编给大家介绍的使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
react 路由Link配置详解
Nov 11 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 #Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 #Javascript
深入理解Javascript中的valueOf与toString
Jan 04 #Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 #Javascript
js实现定时进度条完成后切换图片
Jan 04 #Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 #Javascript
深入理解JavaScript中的预解析
Jan 04 #Javascript
You might like
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
php常用表单验证类用法实例
2015/06/18 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
商业房地产广告语
2014/03/13 职场文书
工伤私了协议书范本
2014/11/24 职场文书
2014年工程工作总结
2014/11/25 职场文书
2015年父亲节寄语
2015/03/23 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
Python中npy和mat文件的保存与读取
2022/04/24 Python