【javascript】判断浏览器类型，是否是手机浏览器

一、判断浏览器类型

在JavaScript中，可以通过navigator.userAgent属性来检测运行脚本的浏览器类型。userAgent字符串包含了关于浏览器的信息，包括名称、版本和操作系统等。

1、示例

function getBrowser() {
    let userAgent = navigator.userAgent;
    if (userAgent.indexOf("Chrome") > -1) {
        return "Google Chrome";
    } else if (userAgent.indexOf("Safari") > -1) {
        return "Apple Safari";
    } else if (userAgent.indexOf("Firefox") > -1) {
        return "Mozilla Firefox";
    } else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident/") > -1) {
        return "Microsoft Internet Explorer";
    } else if (userAgent.indexOf("Edge") > -1) {
        return "Microsoft Edge";
    } else if (userAgent.indexOf("OPR") > -1) {
        return "Opera";
    } else {
        return "Unknown Browser";
    }
}

console.log(getBrowser());

2、navigator.userAgent参数详解

navigator.userAgent 是 JavaScript 中 navigator 对象的一个只读属性，它返回一个字符串，描述了当前浏览器的用户代理标识（User-Agent string）。这个字符串通常包含有关浏览器的类型、渲染引擎、操作系统和其他信息。

1）格式如下：

Mozilla/[version] ([system information]) [platform]; [ui language]/[browser] [version] ([mobile information]); [engine] [version]

2）参数介绍：

其中：

• Mozilla/：几乎所有的现代浏览器都会以 "Mozilla/" 开头，这是为了向后兼容早期的 Web 服务器，它们被设计成识别 "Mozilla" 字符串。
• [version]：浏览器版本号。
• ([system information])：系统信息，例如操作系统和架构。
• [platform]：平台信息，例如 Windows, Linux, Mac OS X 等。
• [ui language]：用户界面的语言。
• [browser] 和 [version]：浏览器名称及其版本。
• ([mobile information])：如果是移动设备，则会包含移动设备的信息。
• [engine] 和 [version]：浏览器的渲染引擎及其版本。

3）示例

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

• Mozilla/5.0 表示兼容性标记。
• (Windows NT 10.0; Win64; x64) 表示操作系统是 Windows 10，64位版本。
• AppleWebKit/537.36 表示渲染引擎是 WebKit 的一个分支。
• (KHTML, like Gecko) 表示它像 Gecko 引擎一样处理某些 Web 标准。
• Chrome/91.0.4472.124 表示浏览器是 Chrome，版本为 91.0.4472.124。
• Safari/537.36 表示 Safari 的版本，尽管这个部分对于 Chrome 来说不是特别重要。

备注：
虽然 navigator.userAgent 提供了关于浏览器和设备的大量信息，但它的使用有一定的局限性和风险：

• 不同的浏览器可能报告不同的信息，使得解析变得复杂。
• 用户代理字符串可以被修改或伪装，尤其是当用户使用代理服务或隐私扩展时。
• 依赖 navigator.userAgent 进行功能检测可能会导致不准确的浏览器检测和潜在的兼容性问题。

二、判断手机浏览器还是电脑浏览器

navigator.userAgent 属性中的关键字。手机和平板设备的 userAgent 字符串通常会包含 "Mobile" 或 "Android"、"iPhone"、"iPad" 等关键词。这里有一个简单的示例函数，用于检测设备类型：

function detectDeviceType() {
    const userAgent = navigator.userAgent || navigator.vendor || window.opera;

    // 检测是否为移动设备
    if (/android/i.test(userAgent)) {
        return 'Android Device';
    }

    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return 'iOS Device';
    }

    // 检测是否为 Windows Phone 设备
    if (/windows phone/i.test(userAgent)) {
        return 'Windows Phone Device';
    }

    // 检查是否包含 "Mobile" 关键词，用于其他非 iOS/Android 移动设备
    if (/mobile/i.test(userAgent)) {
        return 'Mobile Device';
    }

    // 如果以上条件都不满足，我们假设是桌面设备
    return 'Desktop';
}

console.log(detectDeviceType());

注意，这种方法并不是完全可靠的，因为 userAgent 字符串可以被修改或伪装。例如，一些桌面浏览器提供了模拟移动设备 userAgent 的功能，而某些移动浏览器则允许用户切换到桌面模式。

在现代Web开发中，更推荐的做法是采用响应式设计（Responsive Design），让网站能够根据屏幕尺寸自动调整布局，而不是依赖于设备检测。这样可以确保网站在各种设备上都有良好的用户体验，同时减少因设备检测带来的兼容性问题。然而，设备检测仍然可以在某些场景下提供有用的信息，比如在需要推送适合设备的应用下载链接时。