如何检测Flutter Web应用是否运行在移动端浏览器中

Platform常量仅可识别原生端的构建目标，无法区分Web环境下的浏览器运行设备类型，可通过以下两种方式实现需求： #

方案1：原生接口实现（无额外依赖） #

通过dart:html库读取浏览器UA、设备特征做判断，需要使用条件导入避免非Web环境编译报错：

1. 导入依赖

import 'package:flutter/foundation.dart' show kIsWeb;
// 条件导入：仅Web环境引入dart:html
import 'dart:html' if (dart.library.io) 'dart:io' as web;

2. 编写判断逻辑

bool checkIsMobileBrowser() {
  // 非Web环境直接返回false
  if (!kIsWeb) return false;
  // 匹配移动端UA特征
  final RegExp mobileReg = RegExp(
    r'Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini',
    caseSensitive: false,
  );
  bool isMatchUA = mobileReg.hasMatch(web.window.navigator.userAgent);
  // 兼容iPadOS：iPadOS默认UA和桌面端Safari一致，补充触摸点判断
  bool isIPadOS = web.window.navigator.platform == 'MacIntel' && web.window.navigator.maxTouchPoints > 1;
  // 可选：补充屏幕宽度阈值判断，避免UA被篡改的情况
  bool isNarrowScreen = web.window.matchMedia('(max-width: 768px)').matches;
  return isMatchUA || isIPadOS || isNarrowScreen;
}

方案2：使用官方维护的device_info_plus库 #

如果不想自行处理UA匹配和平台兼容逻辑，可以直接使用Flutter官方生态的设备信息库device_info_plus：

1. 在pubspec.yaml中添加依赖：

dependencies:
  device_info_plus: ^9.1.1 # 替换为当前最新版本

2. 调用判断逻辑：

import 'package:device_info_plus/device_info_plus.dart';
import 'package:flutter/foundation.dart' show kIsWeb;

Future<bool> checkIsMobileBrowser() async {
  if (!kIsWeb) return false;
  WebBrowserInfo webInfo = await DeviceInfoPlugin().webBrowserInfo;
  String? platform = webInfo.platform?.toLowerCase();
  return platform?.contains('android') == true ||
      platform?.contains('iphone') == true ||
      platform?.contains('ipad') == true ||
      platform?.contains('ipod') == true;
}

注意事项 #

• 所有Web端的设备判断逻辑都存在被用户篡改UA的可能，核心业务逻辑不要完全依赖该判断结果
• 如果你开发的是响应式站点，更推荐使用媒体查询判断屏幕尺寸来做布局适配，比设备类型判断兼容性更高

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