如何使用jQuery检测指定版本及以上的浏览器

针对你需要判断浏览器是否支持指定CSS属性（如mix-blend-mode）、或是否达到指定版本要求的需求，推荐按优先级选择以下两种实现方案：

方案1：优先使用特性检测（更稳定，无需判断浏览器版本） #

不需要识别具体浏览器和版本，直接检测当前环境是否支持目标特性即可，是前端兼容场景的首选方案。

CSS侧检测 #

直接用CSS原生的@supports规则编写兼容逻辑：

/* 支持mix-blend-mode时的样式逻辑 */
@supports (mix-blend-mode: multiply) {
  .my-element {
    mix-blend-mode: multiply;
  }
}

/* 不支持时的降级样式 */
@supports not (mix-blend-mode: multiply) {
  .my-element {
    /* 自定义替代样式，例如调整透明度、修改配色等 */
    opacity: 0.85;
    background: rgba(255,255,255,0.9);
  }
}

JS侧检测 #

如果需要在JS逻辑中判断特性支持情况，使用CSS.supports接口：

const isMixBlendSupport = CSS.supports('mix-blend-mode', 'normal');
if (isMixBlendSupport) {
  // 执行支持特性时的逻辑
} else {
  // 执行降级逻辑
}

方案2：浏览器版本检测（仅用于特殊场景） #

如果确实有需要按浏览器版本做判断的场景，可以通过提取UA信息、逐位比对版本号的逻辑实现，示例代码如下：

// 配置各浏览器的最低支持版本，可根据你的兼容需求调整
const minVersionMap = {
  chrome: 41,
  firefox: 32,
  safari: 8,
  edge: 79
};

// 提取浏览器名称和主版本号
function getBrowserInfo() {
  const ua = navigator.userAgent.toLowerCase();
  if (ua.includes('msie') || ua.includes('trident')) {
    return { name: 'ie', version: 11 };
  }
  if (ua.includes('edg')) {
    return { name: 'edge', version: Number(ua.match(/edg\/(\d+)/)?.[1] || 0) };
  }
  if (ua.includes('chrome')) {
    return { name: 'chrome', version: Number(ua.match(/chrome\/(\d+)/)?.[1] || 0) };
  }
  if (ua.includes('firefox')) {
    return { name: 'firefox', version: Number(ua.match(/firefox\/(\d+)/)?.[1] || 0) };
  }
  if (ua.includes('safari')) {
    return { name: 'safari', version: Number(ua.match(/version\/(\d+)/)?.[1] || 0) };
  }
  return { name: 'unknown', version: 0 };
}

// 版本判断逻辑
const browser = getBrowserInfo();
let isMeetVersionReq = false;
if (browser.name === 'ie') {
  isMeetVersionReq = false; // IE全版本不支持目标特性
} else if (minVersionMap[browser.name]) {
  isMeetVersionReq = browser.version >= minVersionMap[browser.name];
}

// 后续业务逻辑
if (isMeetVersionReq) {
  // 执行符合版本要求的操作
} else {
  // 执行降级操作
}

注意：版本检测依赖UA规则，而各家浏览器的UA标识会持续更新，维护成本较高，非必要场景优先使用特性检测方案。

内容的提问来源于stack exchange，提问作者Bill Bronson