EnlightenCode

🌐 浏览器版本检测工具 - 处理前端兼容性问题 ​

📝 介绍 ​

在前端开发中，经常需要处理不同浏览器的兼容性问题。通过检测用户的浏览器类型和版本号，我们可以为不同浏览器提供相应的解决方案。

💻 代码实现 ​

js
export const getBrowserInfo = () => {
    const { userAgent } = navigator;

    const browserRegexList = [
        { name: 'Edge', regex: /(Edg|EdgiOS|EdgA)\/(\d+)/ },
        { name: 'Opera', regex: /(OPR|OPiOS)\/(\d+)/ },
        { name: 'Firefox', regex: /(Firefox|FxiOS)\/(\d+)/ },
        { name: 'Safari', regex: /(Version)\/(\d+)/ },
        { name: 'Chrome', regex: /(Chrome|CriOS)\/(\d+)/ },
    ];

    let browserName = 'Unknown';
    let browserVersion = 'Unknown';

    for (const { name, regex } of browserRegexList) {
        if (regex.test(userAgent)) {
            browserName = name;
            browserVersion = userAgent.match(regex)[2];
            break;
        }
    }

    return {
        name: browserName,
        version: browserVersion,
    };
};

⚠️ 使用注意事项 ​

  1. 移动端识别

    • iOS 系统下浏览器标识符会有所不同：
      • Chrome 在 iOS 上显示为 CriOS
      • Edge 在 iOS 上显示为 EdgiOS
      • Firefox 在 iOS 上显示为 FxiOS
      • Opera 在 iOS 上显示为 OPiOS

  2. 使用示例

js
const browser = getBrowserInfo();
console.log(`当前浏览器: ${browser.name}`);
console.log(`版本号: ${browser.version}`);

// 根据浏览器版本处理兼容性
if (browser.name === 'Chrome' && parseInt(browser.version) < 88) {
    // 处理低版本 Chrome 兼容性问题
}

🔍 补充说明 ​

  1. Safari 检测

    • Safari 浏览器的版本号需要通过 Version/xx 来获取
    • iOS 上的所有浏览器都使用 WebKit 内核，需要特别注意

  2. 用户代理字符串（User Agent）变化

    • 浏览器的 UA 字符串可能会随版本更新而改变
    • 建议定期更新正则表达式以适应新的变化

🚀 最佳实践 ​

  1. 在项目初始化时进行浏览器检测
  2. 将检测结果缓存，避免重复执行
  3. 配合特性检测（Feature Detection）使用，不要完全依赖浏览器版本

📚 参考资料 ​