流量变现70%分成 全国楼凤小姐姐 招商联系客服 招商联系客服 招商联系客服 招商联系客服

JQuery判断当前设备是否为移动终端、判断当前浏览器内核类型

[复制链接]
查看146 | 回复0 | 2024-10-1 11:58:46 | 显示全部楼层 |阅读模式
判断移动终端

[color=rgba(58, 58, 58, 0.88)]JavaScript中,可以使用navigator对象的userAgent属性来判断当前设备是否为移动设备,并使用特定的正则表达式匹配不同的浏览器内核。window.navigator.userAgent属性可以返回当前浏览器的用户代理字符串。通过判断用户代理字符串中是否包含移动设备的关键词,我们可以得知用户是在手机端还是在电脑端访问。下面是一个JavaScript示例代码,演示了如何使用window.navigator.userAgent属性来判断手机端:

  1. $(document).ready(function() {
  2.     var isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  3.     var isSafari = /Safari/.test(navigator.userAgent) && /AppleComputer/.test(navigator.vendor);
  4.     var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
  5.     var isFirefox = /Firefox/.test(navigator.userAgent);

  6.     if (isMobileDevice) {
  7.         console.log("移动设备");
  8.         if (isSafari) {
  9.             console.log("Safari 浏览器内核");
  10.         } else if (isChrome) {
  11.             console.log("Chrome 浏览器内核");
  12.         } else if (isFirefox) {
  13.             console.log("Firefox 浏览器内核");
  14.         }
  15.     } else {
  16.         console.log("桌面设备");
  17.     }
  18. });
复制代码

[color=rgba(58, 58, 58, 0.88)]或者更简洁一些的JQuery方法:

  1. var sj=navigator.userAgent.match(/iPad|iPhone|Linux|Android|iPod/i) != null;
  2. if(sj){
  3.     console.log('移动设备Wap端');
  4. }else {
  5.     console.log('PC端');
  6. };
复制代码

[color=rgba(58, 58, 58, 0.88)]当然也可以用JQuery分别判断是安卓终端还是IOS终端设备:

  1. var ios = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null;
  2. var Android = navigator.userAgent.match(/Linux|Android/i) != null;
  3. var IEMobile = navigator.userAgent.match(/IEMobile/i) != null;
  4. if(ios){
  5.     console.log('苹果ios终端');
  6. }else if (Android){
  7.     console.log('安卓Android终端');
  8. }else if (IEMobile){
  9.     console.log('Winphone手机终端');
  10. };
复制代码

判断浏览器内核

[color=rgba(58, 58, 58, 0.88)]在判断浏览器内核方面也可以比较全面:

  1. function myexplorer(){
  2.     var explorer = window.navigator.userAgent;
  3.     if (explorer.indexOf("QQBrowser")>=0 || explorer.indexOf("QQ")>=0){
  4.             return myexplorer="腾讯QQ浏览器";
  5.     }else if(explorer.indexOf("Safari")>=0 && explorer.indexOf("MetaSr")>=0){
  6.             return myexplorer="搜狗浏览器";
  7.     }else if (!!window.ActiveXObject || "ActiveXObject" in window){//IE
  8.         if (!window.XMLHttpRequest){return myexplorer="IE6";
  9.         }else if (window.XMLHttpRequest && !document.documentMode){
  10.                 return myexplorer="IE7";
  11.         }else if (!-[1,] && document.documentMode && !("msDoNotTrack" in window.navigator)){
  12.                 return myexplorer="IE8";
  13.         }else{//IE9 10 11
  14.             var hasStrictMode=(function(){"use strict";return this===undefined;}());
  15.             if (hasStrictMode){
  16.                 if (!!window.attachEvent){return myexplorer="IE10";}else{return myexplorer="IE11";}
  17.             }else{
  18.                 return myexplorer="IE9";
  19.             }
  20.         }
  21.     }else{//非IE
  22.         if (explorer.indexOf("LBBROWSER") >= 0){return myexplorer="猎豹";
  23.         }else if(explorer.indexOf("360ee")>=0){return myexplorer="360极速浏览器";
  24.         }else if(explorer.indexOf("360se")>=0){return myexplorer="360安全浏览器";
  25.         }else if(explorer.indexOf("se")>=0){return myexplorer="搜狗浏览器";
  26.         }else if(explorer.indexOf("aoyou")>=0){return myexplorer="遨游浏览器";
  27.         }else if(explorer.indexOf("qqbrowser")>=0){return myexplorer="QQ浏览器";
  28.         }else if(explorer.indexOf("baidu")>=0){return myexplorer="百度浏览器";
  29.         }else if(explorer.indexOf("Firefox")>=0){return myexplorer="火狐";
  30.         }else if(explorer.indexOf("Maxthon")>=0){return myexplorer="遨游";
  31.         }else if(explorer.indexOf("Chrome")>=0){return myexplorer="谷歌(或360伪装)";
  32.         }else if(explorer.indexOf("Opera")>=0){return myexplorer="欧朋";
  33.         }else if (explorer.indexOf("TheWorld") >= 0){return myexplorer="世界之窗";
  34.         }else if(explorer.indexOf("Safari")>=0){return myexplorer="苹果";
  35.         }else{return myexplorer="其他";
  36.         }
  37.     }
  38. };
复制代码



苹果cms设备判断

[color=rgba(58, 58, 58, 0.88)]苹果cms内置home.js里的一段浏览设备判断参考:

  1. var MAC={
  2.     'Url': document.URL,
  3.     'Title': document.title,
  4.     'UserAgent' : function(){
  5.         var ua = navigator.userAgent;//navigator.appVersion
  6.         return {
  7.             'mobile': !!ua.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
  8.             'ios': !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
  9.             'android': ua.indexOf('Android') > -1 || ua.indexOf('Linux') > -1, //android终端或者uc浏览器
  10.             'iPhone': ua.indexOf('iPhone') > -1 || ua.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
  11.             'iPad': ua.indexOf('iPad') > -1, //是否iPad
  12.             'trident': ua.indexOf('Trident') > -1, //IE内核
  13.             'presto': ua.indexOf('Presto') > -1, //opera内核
  14.             'webKit': ua.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
  15.             'gecko': ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') == -1, //火狐内核
  16.             'weixin': ua.indexOf('MicroMessenger') > -1 //是否微信 ua.match(/MicroMessenger/i) == "micromessenger",
  17.         };
  18.     }(),
  19. };
复制代码

[color=rgba(58, 58, 58, 0.88)]


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则