JS 判断客户端是否是 iOS 或者 Android

  • A+
所属分类:前端开发

最近做的一个项目中,很多页面会通过微信等渠道分享出去,在分享页面上提供公司 APP 的下载,但是在很多应用的浏览器中,点击下载链接无法下载应用,那么针对这些浏览器我们需要给用户提示从 Safari 或者系统自带的浏览器打开分享页面,通过 js 就可以判断当前页面是在什么浏览器打开的。

每个客户端都带有自身的 UA 标识,通过 JavaScript ,可以获取客户端标识,我们可以获取浏览器的 userAgent ,用正则来判断手机是 ios(苹果)还是 Android(安卓)客户端。代码如下:

  1. <script type="text/javascript">
  2.     var u = navigator.userAgent;
  3.     var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
  4.     var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
  5.     alert('是否是Android:' + isAndroid);
  6.     alert('是否是iOS:' + isiOS);
  7. </script>

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

方法一

  1. <script type="text/javascript">
  2.     // 判断访问终端
  3.     var browser = {
  4.         versions: function () {
  5.             var u = navigator.userAgent, app = navigator.appVersion;
  6.             return {
  7.                 trident: u.indexOf('Trident') > -1, // IE内核
  8.                 presto: u.indexOf('Presto') > -1, // opera内核
  9.                 webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
  10.                 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,// 火狐内核
  11.                 mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
  12.                 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
  13.                 android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
  14.                 iPhone: u.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
  15.                 iPad: u.indexOf('iPad') > -1, // 是否iPad
  16.                 webApp: u.indexOf('Safari') == -1, // 是否web应该程序,没有头部与底部
  17.                 weixin: u.indexOf('MicroMessenger') > -1, // 是否微信 (2015-01-22新增)
  18.                 qq: u.match(/\sQQ/i) == " qq" // 是否QQ
  19.             };
  20.         }(),
  21.         language: (navigator.browserLanguage || navigator.language).toLowerCase()
  22.     }
  23. </script>

使用方法:

  1. // 判断是否IE内核
  2. if (browser.versions.trident) {
  3.     alert("is IE");
  4. }
  5. // 判断是否webKit内核
  6. if (browser.versions.webKit) {
  7.     alert("is webKit");
  8. }
  9. // 判断是否移动端
  10. if (browser.versions.mobile || browser.versions.android || browser.versions.ios) {
  11.     alert("移动端");
  12. }

检测浏览器语言:

  1. currentLang = navigator.language;   // 判断除IE外其他浏览器使用语言
  2. if (!currentLang) {// 判断IE浏览器使用语言
  3.     currentLang = navigator.browserLanguage;
  4. }
  5. alert(currentLang);

方法二

  1. <script type="text/javascript">
  2.     if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
  3.         alert("I am iPhone");
  4.         // window.location.href = "iPhone.html";
  5.     } else if (/(Android)/i.test(navigator.userAgent)) {
  6.         alert("I am Android");
  7.         // window.location.href = "Android.html";
  8.     } else {
  9.         alert("I am pc");
  10.         // window.location.href = "pc.html";
  11.     }
  12. </script>

以上代码可以判断很多浏览器,包括判断 IE 浏览器,Opera 浏览器,苹果浏览器,谷歌浏览器,火狐浏览器等。

博主只是一名前端的小白,只是把自己用到的知识分享一下,要是有什么不对的地方,欢迎大家提出~~

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: