JS利用navigator.userAgent识别浏览器与设备环境

作者:白露

时间:2026-10-26

浏览:577

本文详解如何利用JavaScript的navigator.userAgent属性识别当前浏览环境。通过解析UserAgent字符串,可区分PC与手机、判断Android或iOS系统、识别平板设备,并检测是否为微信内置浏览器。文中提供具体代码示例,帮助开发者实现响应式跳转与环境适配。

文章目录

navigator.userAgent属性包含了浏览器在HTTP请求中发送的用户代理头信息。通过解析该字符串,开发者可以获取浏览器的类型、版本号以及客户端操作系统的详细数据。

在PC端浏览器中访问页面时,获取到的navigator.userAgent字符串通常包含Windows、Chrome等关键标识。

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36

在手机Web端访问时,UserAgent字符串会反映出移动设备的特征,如iPhone、iOS版本及Mobile标识。

Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

场景1:判断页面是在手机端还是PC端打开

window.location.href=/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)?"http://localhost:8888/mobile_web":"http://localhost:8888/PC";

场景2:判断页面是在手机端,平板端还是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("手机" );
} else if (os.isTablet) {
    alert("平板" );
} else if (os.isPc) {
    alert("电脑" );
}

场景3:获取操作系统类型,判断是Android或者IOS

/**
     * 获取操作系统类型,
     * 0 Android
     * 1 iOS
     */
    function getOSType() {
        if (/(Android)/i.test(navigator.userAgent)) {
            return 0;
        } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
            return 1;
        } else {
            return 2;
        }
    }

场景4:判断当前环境是否是微信环境

function is_weixin(){
      var ua = navigator.userAgent.toLowerCase();
      if(ua.match(/MicroMessenger/i)=="micromessenger") {
           return true;
     } else {
            return false;
      }
}

本文介绍了基于JS navigator.userAgent进行浏览器环境判断的方法,涵盖设备类型、操作系统及特定应用环境的检测。如需了解更多相关技术细节,可查阅本站往期文章或继续浏览后续内容,感谢支持。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章