JS判断浏览器环境(pc端/移动端/微信/QQ/新浪微博)
- A
我们日常会遇到需要区分用户使用不同的浏览器用来展示不同的内容,本文给大家列举了多种常见的场景判断:
一、判断pc端/移动端
方法一:
// 判断浏览器函数 function isMobile() { if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) { return true; // 移动端 } else { return false; // PC端 } }
方法二:
var os = function() { var ua = navigator.userAgent, isWindowsPhone = /(?:Windows Phone)/.test(ua), isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone, isAndroid = /(?:Android)/.test(ua), isFireFox = /(?:Firefox)/.test(ua), isChrome = /(?:Chrome|CriOS)/.test(ua), isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)), isPhone = /(?:iPhone)/.test(ua) && !isTablet, isPc = !isPhone && !isAndroid && !isSymbian; return { isTablet: isTablet, isPhone: isPhone, isAndroid: isAndroid, isPc: isPc }; } (); // 使用方法 if (os.isAndroid || os.isPhone) { alert("当前为手机访问"); }
二、判断微信客户端
var isWechart = function() { var rst = true if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) { var ua = navigator.userAgent.toLowerCase(); if (! (ua.match(/MicroMessenger/i) == "micromessenger")) { rst = false; } } else { rst = false; } return rst; }
三、判断是 PC 端还是手机端,以及手机端是微信浏览器还是非微信浏览器
//平台、设备和操作系统 var system = { win: false, mac: false, xll: false, ipad: false }; //检测平台 var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); system.ipad = (navigator.userAgent.match(/iPad/i) != null) ? true: false; if (system.win || system.mac || system.xll || system.ipad) { alert("在PC端上打开的"); } else { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { alert("在手机端微信上打开的"); } else { alert("在手机上非微信上打开的"); } }
四、判断不同应用
if (browser.versions.mobile) { //判断是否是移动设备打开。browser代码在下面 var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象 if (ua.match(/MicroMessenger/i) == "micromessenger") { //在微信中打开 } if (ua.match(/WeiBo/i) == "weibo") { //在新浪微博客户端打开 } if (ua.match(/QQ/i) == "qq") { //在QQ空间打开 } if (browser.versions.ios) { //是否在IOS浏览器打开 } if (browser.versions.android) { //是否在安卓浏览器打开 } } else { //否则就是PC浏览器打开 }
五、判断 IE 浏览器,Opera 浏览器,苹果浏览器,谷歌浏览器,火狐浏览器等
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('Linux') > -1, //android终端或uc浏览器 iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部 }; } (), language: (navigator.browserLanguage || navigator.language).toLowerCase() }
傲世》原创,转载请保留文章出处。
本文链接:https://www.recho.cn/200.html
如您对本文章内容有所疑问、反馈或补充,欢迎通过邮箱:[email protected] 联系我们!
版权声明:若无特殊注明,本文为《正文到此结束