Flutter iOS移动端浏览器识别异常：Chrome被识别为Safari求助

问题根源 #

• iOS平台限制：所有第三方浏览器（包括Chrome）必须使用Apple的WebKit渲染引擎，导致User-Agent（UA）字符串会包含Safari相关字段，常规检测逻辑会误判。
• 现有库局限性：device_info_plus或browser_detector这类库依赖标准浏览器API字段（如appName），但iOS第三方浏览器的appName会返回历史遗留的"Netscape"，无法直接识别真实浏览器。

解决方案 #

1. 基于原始UA字符串自定义检测逻辑

iOS第三方浏览器的UA会包含专属标识，比如Chrome for iOS的UA里有CriOS/版本号，可以通过匹配这些专属关键词来准确识别：

示例实现代码

import 'dart:html' as html;

// 自定义浏览器信息模型
class CustomBrowserInfo {
  final String name;
  final String version;
  final String platform;

  CustomBrowserInfo({
    required this.name,
    required this.version,
    required this.platform,
  });
}

CustomBrowserInfo getBrowserInfo() {
  final userAgent = html.window.navigator.userAgent;
  final platform = html.window.navigator.platform;

  // 检测Chrome for iOS（专属标识为CriOS）
  final chromeMatch = RegExp(r'CriOS/(\d+\.\d+\.\d+\.\d+)').firstMatch(userAgent);
  if (chromeMatch != null) {
    return CustomBrowserInfo(
      name: 'Chrome',
      version: chromeMatch.group(1)!,
      platform: platform,
    );
  }

  // 检测Safari（排除Chrome、Firefox等第三方浏览器的UA干扰）
  final safariMatch = RegExp(r'Safari/(\d+\.\d+)').firstMatch(userAgent);
  if (safariMatch != null && !userAgent.contains('CriOS/') && !userAgent.contains('FxiOS/')) {
    return CustomBrowserInfo(
      name: 'Safari',
      version: safariMatch.group(1)!,
      platform: platform,
    );
  }

  // 检测Firefox for iOS（专属标识为FxiOS）
  final firefoxMatch = RegExp(r'FxiOS/(\d+\.\d+\.\d+)').firstMatch(userAgent);
  if (firefoxMatch != null) {
    return CustomBrowserInfo(
      name: 'Firefox',
      version: firefoxMatch.group(1)!,
      platform: platform,
    );
  }

  // 兜底返回默认API结果
  return CustomBrowserInfo(
    name: html.window.navigator.appName,
    version: html.window.navigator.appVersion,
    platform: platform,
  );
}

2. 替换现有库的解析逻辑

如果你正在使用device_info_plus等库，不要直接依赖其返回的WebBrowserInfo：

• 调用上述getBrowserInfo()方法获取真实的浏览器名称和版本
• 忽略info?.appName这类不可靠字段，完全基于UA解析

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