如何使用JavaScript检测macOS Big Sur（11.0.0+）与Firefox 90+环境以适配SVG元素字体大小

你遇到的这种仅在特定OS版本+浏览器组合下出现的布局异常，确实需要精准的环境检测来避免影响其他正常环境。下面我会一步步拆解实现方案，帮你搞定字体大小的针对性适配。

一、核心检测逻辑拆解 #

要实现目标，我们需要同时验证两个关键条件：

1. 当前浏览器是Firefox，且版本≥90
2. 当前操作系统是macOS Big Sur及以上（版本≥11.0）

1. 检测Firefox浏览器及版本 #

Firefox的用户代理字符串（User Agent）里会包含Firefox/版本号的标识，我们可以用正则提取版本号并做数值比较：

function isFirefoxMinVersion(minVersion) {
  // 匹配Firefox版本，比如从"Firefox/100.0"中提取出100
  const firefoxMatch = navigator.userAgent.match(/Firefox\/(\d+)/);
  if (!firefoxMatch) return false;
  const firefoxVersion = parseInt(firefoxMatch[1], 10);
  return firefoxVersion >= minVersion;
}

2. 检测macOS Big Sur及以上版本 #

macOS的用户代理字符串通常包含Mac OS X或Macintosh标识，版本号格式多为11_6_6这类下划线分隔的形式，我们只需提取主版本号判断是否≥11即可：

function isMacOSBigSurOrNewer() {
  const macMatch = navigator.userAgent.match(/Mac OS X (\d+)_(\d+)/);
  if (!macMatch) return false;
  
  const majorVersion = parseInt(macMatch[1], 10);
  // Big Sur是macOS 11，主版本号≥11就符合要求
  return majorVersion >= 11;
}

注：新版macOS的UA可能会用Macintosh; Intel Mac OS X 11_6_6格式，上面的正则同样能覆盖这种情况。

二、组合检测并应用适配样式 #

把两个检测函数结合，针对符合条件的环境动态调整字体大小：

// 组合判断是否需要适配
function shouldAdjustFontSize() {
  return isFirefoxMinVersion(90) && isMacOSBigSurOrNewer();
}

// 执行字体大小适配
function applyFontSizeFix() {
  // 替换成你实际的按钮选择器（类名/ID等）
  const buttons = document.querySelectorAll('.game-button'); 
  if (shouldAdjustFontSize()) {
    buttons.forEach(button => {
      button.style.fontSize = '51.5px';
    });
  } else {
    buttons.forEach(button => {
      button.style.fontSize = '45px'; // 常规显示的字体大小
    });
  }
}

// 页面加载完成后执行适配
window.addEventListener('DOMContentLoaded', applyFontSizeFix);
// 可选：监听窗口 resize，确保响应式场景下适配生效
window.addEventListener('resize', applyFontSizeFix);

三、额外优化建议 #

• 优先使用CSS类而非内联样式：可以定义.big-sur-firefox-fix { font-size: 51.5px !important; }，然后通过JS给按钮添加/移除这个类，更符合样式与逻辑分离的原则。
• 测试边界场景：比如macOS 11.0（Big Sur初始版本）、Firefox 90.0版本，确保检测逻辑无遗漏。
• 考虑特性检测替代UA检测：如果能定位到导致SVG偏移的具体CSS特性支持问题，用特性检测会比UA检测更可靠，但针对这种极特定的环境组合，UA检测是最直接的解决方案。

内容的提问来源于stack exchange，提问作者Parking Master