浏览器检测 版本提示 Jquery实现检测旧版浏览器并弹出相关信息的代码片段

用jQuery优雅提醒用户升级
（2025年8月最新消息：随着Chrome和Firefox陆续停止对IE兼容模式的支持，旧版浏览器用户访问现代网站时可能出现布局错乱、功能失效等问题，开发者需提前做好兼容提醒。）

为什么需要检测旧版浏览器？
虽然现代浏览器普及率已很高，但仍有部分用户使用IE11甚至更早版本，或长期未更新浏览器，这些旧版浏览器可能：

• 无法解析新版CSS/JavaScript语法
• 存在已知安全漏洞
• 导致AJAX请求失败

通过轻量级检测代码，我们可以友好提示用户升级,而非直接让页面崩溃。

jQuery实现方案
以下代码片段通过navigator.userAgent检测浏览器版本,当识别到旧版时弹出遮罩层提示：

$(document).ready(function() {
  // 定义最低支持的浏览器版本
  const MIN_CHROME = 80;  // Chrome 80+ 
  const MIN_FIREFOX = 78; // Firefox 78+
  const MIN_EDGE = 80;    // Edge 80+
  const BLOCK_IE = true;  // 是否完全屏蔽IE
  // 获取浏览器信息
  const userAgent = navigator.userAgent;
  let isUnsupported = false;
  let warningMsg = "";
  // 检测IE
  if (BLOCK_IE && /Trident|MSIE/.test(userAgent)) {
    isUnsupported = true;
    warningMsg = "本网站不再支持Internet Explorer，请使用Edge/Chrome/Firefox等现代浏览器。";
  } 
  // 检测Chrome
  else if (/Chrome\/(\d+)/.test(userAgent)) {
    const version = parseInt(RegExp.$1);
    if (version < MIN_CHROME) {
      isUnsupported = true;
      warningMsg = `您的Chrome浏览器（v${version}）较旧，部分功能可能异常，建议升级至v${MIN_CHROME}+，`;
    }
  }
  // 检测Firefox
  else if (/Firefox\/(\d+)/.test(userAgent)) {
    const version = parseInt(RegExp.$1);
    if (version < MIN_FIREFOX) {
      isUnsupported = true;
      warningMsg = `检测到旧版Firefox（v${version}），为确保功能完整，请更新至v${MIN_FIREFOX}+，`;
    }
  }
  // 若版本过低则显示提示层
  if (isUnsupported) {
    $('body').prepend(`
      <div class="browser-warning" style="
        position: fixed; top: 0; left: 0; width: 100%; 
        padding: 15px; background: #fff3cd; z-index: 9999;
        border-bottom: 1px solid #ffc107; text-align: center;
      ">
        <span>⚠️ ${warningMsg}</span>
        <button style="margin-left: 10px; cursor: pointer">我知道了</button>
      </div>
    `);
    // 点击按钮关闭提示
    $('.browser-warning button').click(function() {
      $(this).parent().fadeOut();
    });
  }
});

代码优化建议

1. 精准降级：可针对特定浏览器隐藏高级功能（如WebP图片），而非全站提示
2. 样式隔离：将CSS样式抽离到外部文件，避免污染全局样式
3. 本地存储：用localStorage记录用户已关闭提示，避免频繁打扰

   if (localStorage.getItem('hideBrowserWarning')) isUnsupported = false;
   $('.browser-warning button').click(function() {
     localStorage.setItem('hideBrowserWarning', 'true');
     $(this).parent().fadeOut();
   });

注意事项

• 不要完全阻止页面渲染，允许用户临时忽略提示
• 在控制台输出调试信息方便排查：

  console.log('当前浏览器信息:', navigator.userAgent); 

• 定期更新检测逻辑（每年至少一次），避免误判新版本