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

Admin
Admin
Admin
52
文章
6
评论
2019年1月3日21:11:30 评论 6,991 2629字阅读8分45秒

最近做的一个项目中,很多页面会通过微信等渠道分享出去,在分享页面上提供公司 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 浏览器,苹果浏览器,谷歌浏览器,火狐浏览器等。

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

继续阅读
Admin
  • 本文由 发表于 2019年1月3日21:11:30
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
Vue 中计算属性和侦听器 前端开发

Vue 中计算属性和侦听器

在 Vue 中通常我们会在模板绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句,那么整个模板就会变得特别的臃肿,可读性和维护性将会降低,因此为了简化逻辑,我们可以使用计算属...
浅谈 JS 中的防抖和节流操作 前端开发

浅谈 JS 中的防抖和节流操作

一般在进行窗口的 resize、scroll 等输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用 debounce(防抖)和 thr...
JS中的「import」和「require 」的区别 前端开发

JS中的「import」和「require 」的区别

import 和 require 是 JS 模块化编程使用的,模块化是一种将系统分离成独立功能部分的方法,一个模块是为完成一个功能的一段程序或子程序,"模块"是系统中功能单一且可替换的部分。模块化思想...
匿名

发表评论

匿名网友 填写信息

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