JavaScript判断终端设备类型：PC、iOS与Android的检测方案

JavaScript终端设备检测概述

在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终端

以下提供一个功能更全面的浏览器检查函数，该函数不仅能判断是否为移动终端，还能进一步区分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）的相关方法，希望能为读者提供有益参考。如有任何疑问，欢迎留言交流，小编将及时回复。感谢大家对本站的支持！