2024 - 博客前端一点小修改

服务器到期了，迁移了一下博客，换了个主题。

发现移动端有个提示“浏览器版本太低”弹窗？但本机都是最新的系统和版本…

去Github上翻了下代码，再查了下手机的UA，发现事情并不简单:

Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/123.0.6312.52 Mobile/15E148 Safari/604.1

本机是IOS上的Chrome

变成了CriOS…

找到资料 -> https://chromium.googlesource.com/chromium/src.git/+/HEAD/docs/ios/user_agent.md

然后用Safari，发现也弹窗了，IOS上的Safari和Macos上Safari的UA好像也不太一样。搓搓了代码

function isSupportedBrowser() {
  const ua = navigator.userAgent;
  const macSafariRegex = /Version\/(\d+).*Safari/;
  const iosVersionRegex = /OS (\d+)_/;
  const chromeRegex = /Chrome\/(\d+)|CriOS\/(\d+)/;
  const firefoxRegex = /Firefox\/(\d+)/;
  const edgeRegex = /Edg\/(\d+)/;
  const operaRegex = /Opera\/(\d+)/;
  const criosRegex = /CriOS\/(\d+)/;

  // macOS Safari
  if (ua.includes('Macintosh') && ua.includes('Safari') && !ua.includes('Chrome') && !ua.includes('Edg')) {
    const match = ua.match(macSafariRegex);
    return match && parseInt(match[1], 10) >= 16;
  }

  // iOS Safari
  if ((ua.includes('iPhone') || ua.includes('iPad') || ua.includes('iPod')) && ua.includes('Safari') && !ua.includes('CriOS') && !ua.includes('Edg')) {
    const match = ua.match(iosVersionRegex);
    return match && parseInt(match[1], 10) >= 16;
  }

  // Chrome or Chrome on iOS (CriOS)
  let match = ua.match(chromeRegex);
  if (match) {
    const version = parseInt(match[1] || match[2], 10); // CriOS 的版本可能在第二个捕获组
    return version >= 110;
  }

  // Edge
  match = ua.match(edgeRegex);
  if (match) {
    return parseInt(match[1], 10) >= 110;
  }

  // Firefox
  match = ua.match(firefoxRegex);
  if (match) {
    return parseInt(match[1], 10) >= 113;
  }

  // Opera
  match = ua.match(operaRegex);
  if (match) {
    return parseInt(match[1], 10) >= 102;
  }
  
  return false;
}