JS判断浏览器环境(pc端/移动端/微信/QQ/新浪微博)

    选择打赏方式

我们日常会遇到需要区分用户使用不同的浏览器用来展示不同的内容,本文给大家列举了多种常见的场景判断:

一、判断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
正文到此结束

热门推荐

发表吐槽

匿名评论 请叫我雷锋~

你还可以输入 250 / 250 个字

呵呵 哈哈 吐舌 开心 笑眼 可怜 乖 啊 你懂得 不高兴 生气 汗 黑线 哭 真棒 阴险 鄙视 酷 滑稽 纳尼 疑问 委屈 惊讶 勉强

评论信息框
可使用QQ号实时获取头像自动填写

私密评论

吃奶的力气提交吐槽中...


竟然没有人吐槽,快赶紧抢沙发吧!