如何检测iOS/Safari版本是否低于15或为15及以上

要判断iOS/Safari版本是否低于15，你可以通过正则表达式从navigator.userAgent中提取主版本号，再进行数值比较。以下是具体实现：

步骤1：提取版本号 #

编写函数从用户代理字符串中提取iOS系统版本或Safari浏览器的主版本号：

function getTargetVersion() {
  const ua = navigator.userAgent;
  let version = 0;

  // 匹配iOS系统版本（格式如 "OS 14_7"）
  const iosMatch = ua.match(/OS (\d+)_(\d+)/);
  if (iosMatch) {
    version = parseInt(iosMatch[1], 10);
  } else {
    // 匹配Safari浏览器版本（格式如 "Version/14.1"）
    const safariMatch = ua.match(/Version\/(\d+)/);
    if (safariMatch) {
      version = parseInt(safariMatch[1], 10);
    }
  }

  return version;
}

步骤2：判断版本并控制渲染 #

调用函数获取版本号后，直接和15比较，根据结果决定是否渲染目标内容：

const currentVersion = getTargetVersion();
const shouldRender = currentVersion >= 15;

// 假设目标内容的DOM元素id为"advanced-content"
const advancedContent = document.getElementById('advanced-content');
if (shouldRender) {
  advancedContent.style.display = 'block'; // 执行渲染逻辑
} else {
  advancedContent.style.display = 'none'; // 隐藏不支持的内容
}

说明 #

• 优先匹配iOS系统版本：iOS上的Safari版本与系统版本基本一致，此判断方式更准确。
• 兼容桌面端Safari：针对Mac上的Safari，会提取Version/后的主版本号。
• 边缘情况处理：若无法匹配到版本号（如用户使用非Safari浏览器），默认返回0，即不渲染目标内容，可根据需求调整此逻辑。

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