js判断客户端是iOS还是Android等移动终端的方法


Posted in Javascript onDecember 11, 2013

判断原理:

JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一种是通过分析浏览器的userAgent属性来判断的。在许多情况下,值判断出浏览器类型之后,还需判断浏览器版本才能处理兼容性问题,而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道。

浏览器类型

⑴浏览器特有属性
⑵根据userAgent
浏览器版本
⑴根据userAgent

对于手机浏览器判断

1.如何判断是否为移动终端 利用正则match,
匹配navigator.userAgent是否含有字符串AppleWebKit*****Mobile
安卓qq浏览器HD版 只有AppleWebKit

2手机语言版本的判断
使用navigator.browserLanguage 便可得出windows phone语言版本,
当然可恶的小小手机语言版本也有兼容性的差异,兼容Mozilla,以及AppleWebKit内核的浏览器访问其语言版本,它会列出 navigator.language
CODE:

<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('Linux') > -1, //android终端或uc浏览器 
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器 
iPad: u.indexOf('iPad') > -1, //是否iPad 
webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部 
}; 
}(), 
language:(navigator.browserLanguage || navigator.language).toLowerCase() 
} 
document.writeln("语言版本: "+browser.language); 
document.writeln(" 是否为移动终端: "+browser.versions.mobile); 
document.writeln(" ios终端: "+browser.versions.ios); 
document.writeln(" android终端: "+browser.versions.android); 
document.writeln(" 是否为iPhone: "+browser.versions.iPhone); 
document.writeln(" 是否iPad: "+browser.versions.iPad); 
document.writeln(navigator.userAgent); 
</script>

比较特别的地方
UC浏览器没有安卓报头,只返回:linux ,这里粗略的根据linux来判断是安卓(前提必须满足是移动终端,UC这点是满足的)
安卓QQ浏览器HD版检测的结果是:mac, Safari
Javascript 相关文章推荐
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
理解jquery事件冒泡
Jan 03 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
AngularJS Controller作用域
Jan 09 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
页面点击小红心js实现代码
May 26 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 #Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 #Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 #Javascript
js的匿名函数使用介绍
Dec 11 #Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 #Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 #Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 #Javascript
You might like
flash用php连接数据库的代码
2011/04/21 PHP
php 文件上传类代码
2011/08/06 PHP
php生成动态验证码gif图片
2015/10/19 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
详解vue axios二次封装
2018/07/22 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
python对csv文件追加写入列的方法
2019/08/01 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
美国在线宠物商店:Chewy
2019/01/12 全球购物
Shein英国:女性时尚网上商店
2019/04/10 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
外企财务年会演讲稿
2014/01/03 职场文书
MySQL分布式恢复进阶
2022/07/23 MySQL