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

 更新时间:2017年01月04日 15:00:07   作者:likar  
WEB开发中如何通过Javascript来判断终端为PC、IOS(iphone)、Android呢?可以通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端,下面通过本文学习下吧

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),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • js中net::ERR_FILE_NOT_FOUND报错的解决

    js中net::ERR_FILE_NOT_FOUND报错的解决

    本文主要介绍了js中net::ERR_FILE_NOT_FOUND报错的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • javascript 事件绑定问题

    javascript 事件绑定问题

    在子页面(<iframe></iframe>)创建父级事件!当子页面(<iframe></iframe>)被销毁!子页面(<iframe></iframe>)创建父级事件也会被销毁!
    2011-01-01
  • Bootstrap选项卡与Masonry插件的完美结合

    Bootstrap选项卡与Masonry插件的完美结合

    这篇文章主要介绍了Bootstrap选项卡与Masonry插件的完美结合的相关资料,需要的朋友可以参考下
    2016-07-07
  • 如何使用big.js解决JavaScript浮点数精度丢失问题

    如何使用big.js解决JavaScript浮点数精度丢失问题

    最近在项目中涉及到金额从元转为分(乘100即可),发现乘法居然也会有精度丢失的问题,关于浮点数计算精度丢失是很多语言都存在的问题,本文给大家分享使用big.js解决JavaScript浮点数精度丢失问题,感兴趣的朋友一起看看吧
    2023-12-12
  • 浅谈javascript的Touch事件

    浅谈javascript的Touch事件

    在本文深入研究iOS和Android设备提供的触摸事件API,探索一下可以构建哪些类型的应用,给出一些最佳做法,并论及一些使得可触控应用(touch-enabled application)的开发变得更加容易的有用技术。
    2015-09-09
  • 如何使用不同的方法在 JavaScript 中添加两个向量

    如何使用不同的方法在 JavaScript 中添加两个向量

    这篇文章主要介绍了如何在 JavaScript 中添加向量(Vector)类,使用不同的方法在 JavaScript 中添加两个向量,本文结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • js实现的简洁网页滑动tab菜单效果代码

    js实现的简洁网页滑动tab菜单效果代码

    这篇文章主要介绍了js实现的简洁网页滑动tab菜单效果代码,可实现简单的鼠标滑过tab标签切换的功能,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • js解决url传递中文参数乱码问题的方法详解

    js解决url传递中文参数乱码问题的方法详解

    前后台用js传参过程中,如果是中文就容易出现乱码,下面这篇文章主要给大家介绍了关于js解决url传递中文参数乱码问题的的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • JS DOMReady事件的六种实现方法总结

    JS DOMReady事件的六种实现方法总结

    下面小编就为大家带来一篇JS DOMReady事件的六种实现方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • Javascript变量函数浅析

    Javascript变量函数浅析

    在javascript变量中可以存放两种类型的值:原始值和引用值。原始值存储在栈上的简单字段,也就是值直接存储在变量所标示的位置内。
    2011-09-09

最新评论