使用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 相关文章推荐
2010年最佳jQuery插件整理
Dec 06 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
python实现html转ubb代码(html2ubb)
2014/07/03 Python
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
python中os模块详解
2016/10/14 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Python中join函数简单代码示例
2018/01/09 Python
Python subprocess库的使用详解
2018/10/26 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
python用requests实现http请求代码实例
2019/10/31 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
比赛口号大全
2014/06/10 职场文书
标准版离职证明书
2014/09/12 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
Redis集群的关闭与重启操作
2021/07/07 Redis
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript