常见 H5 浏览器环境标识对照表
H5 页面运行时，前端通常不是只区分“浏览器品牌”，而是区分：
- 普通浏览器
- App 内嵌浏览器
- 系统 WebView
- 小程序容器
- 桌面客户端容器
下面把常见环境、含义和前端常用 UA 判断代码一起整理出来。
一、常见 H5 浏览器环境对照表
| 标识 / UA 关键词 | 代表环境 | 类型 | 常见所在场景 | 说明 | 常用判断代码 |
|---|---|---|---|---|---|
Chrome | Chrome / Chromium 浏览器 | 独立浏览器 | Android、Windows、Mac | 常见标准浏览器标识，很多 WebView 也会带 | const isChrome = /chrome/i.test(ua) && !/edg|opr|samsungbrowser/i.test(ua) |
Safari | Safari 浏览器 | 独立浏览器 | iPhone、Mac | iOS 和 macOS 常见 | const isSafari = /safari/i.test(ua) && !/chrome|crios|edg|opr/i.test(ua) |
CriOS | iOS Chrome | 独立浏览器 | iPhone | iOS 上的 Chrome 标识 | const isIOSChrome = /crios/i.test(ua) |
Edg | Edge 浏览器 | 独立浏览器 | Windows、Mac、移动端 | 微软 Edge 标识 | const isEdge = /edg/i.test(ua) |
Firefox | Firefox 浏览器 | 独立浏览器 | Windows、Mac、Android | 火狐浏览器标识 | const isFirefox = /firefox/i.test(ua) |
OPR / Opera | Opera 浏览器 | 独立浏览器 | 多平台 | Opera 标识 | const isOpera = /opera|opr/i.test(ua) |
SamsungBrowser | 三星浏览器 | 独立浏览器 | Android 三星设备 | 三星自带浏览器 | const isSamsungBrowser = /samsungbrowser/i.test(ua) |
MicroMessenger | 微信内 H5 容器 | App 内嵌浏览器 | 微信中打开链接 | 页面运行在微信环境内 | const isWeChat = /micromessenger/i.test(ua) |
wxwork / WeCom | 企业微信内 H5 容器 | App 内嵌浏览器 | 企业微信中打开链接 | 企业微信环境 | const isWeCom = /wxwork|wecom/i.test(ua) |
AlipayClient | 支付宝内 H5 容器 | App 内嵌浏览器 | 支付宝中打开链接 | 支付宝环境 | const isAlipay = /alipayclient/i.test(ua) |
DingTalk | 钉钉内 H5 容器 | App 内嵌浏览器 | 钉钉中打开链接 | 钉钉环境 | const isDingTalk = /dingtalk/i.test(ua) |
QQ/ | QQ 内 H5 容器 | App 内嵌浏览器 | QQ 中打开链接 | QQ 环境 | const isQQ = /qq\\//i.test(ua) |
Toutiao / NewsArticle | 头条系内 H5 容器 | App 内嵌浏览器 | 资讯流内打开链接 | 字节资讯容器 | const isToutiao = /toutiao|newsarticle/i.test(ua) |
swan/ | 百度系容器 / 小程序相关环境 | 平台容器 | 百度 App | 百度相关 H5 环境 | const isBaiduContainer = /swan\\//i.test(ua) |
miniProgram | 小程序 WebView 环境 | 小程序容器 | 微信/支付宝等小程序 | 表示页面运行在小程序 WebView 中 | const isMiniProgram = /miniprogram/i.test(ua) |
WebView | 通用内嵌浏览器 | App 内嵌浏览器 | 各类 App | 泛指内嵌网页容器 | const isGenericWebView = /webview/i.test(ua) |
wv | Android System WebView | 系统 WebView | Android App 内嵌页 | 常见于 Android 内嵌页 | const isAndroidWV = /; wv\)/i.test(ua) || /\bwv\b/i.test(ua) |
Version/x.x + Safari | iOS Safari / iOS WebView 常见组合 | 浏览器或 WebView | iPhone | iOS 环境常见组合 | const isIOS = /iphone|ipad|ipod/i.test(ua) |
Electron | 桌面客户端内嵌浏览器 | 桌面容器 | 桌面应用 | 页面运行在桌面客户端容器里 | const isElectron = /electron/i.test(ua) |
二、分类理解
| 分类 | 代表 | 特点 |
|---|---|---|
| 独立浏览器 | Chrome、Safari、Edge、Firefox | 用户主动打开浏览器访问页面 |
| App 内嵌浏览器 | MicroMessenger、AlipayClient、DingTalk、QQ/ | 页面运行在 App 内，不是独立浏览器 |
| 系统 WebView | wv、WebView | 常见于 Android/iOS 宿主 App 打开的 H5 |
| 小程序容器 | miniProgram | 页面运行在小程序 WebView 中 |
| 桌面容器 | Electron | 页面运行在桌面客户端容器里 |
三、开发中建议的判断顺序
前端开发里，通常按下面顺序判断更合理：
| 判断目标 | 建议判断 |
|---|---|
| 是否在特定 App 中打开 | MicroMessenger、AlipayClient、DingTalk、QQ/、wxwork |
| 是否是小程序环境 | miniProgram |
| 是否是 Android WebView | wv / WebView |
| 是否是 iOS 环境 | iphone|ipad|ipod |
| 是否是普通浏览器 | Chrome、Safari、Edg、Firefox |
四、推荐的通用代码模板
const ua = navigator.userAgent.toLowerCase();
const env = {
isChrome: /chrome/i.test(ua) && !/edg|opr|samsungbrowser/i.test(ua),
isSafari: /safari/i.test(ua) && !/chrome|crios|edg|opr/i.test(ua),
isIOSChrome: /crios/i.test(ua),
isEdge: /edg/i.test(ua),
isFirefox: /firefox/i.test(ua),
isOpera: /opera|opr/i.test(ua),
isSamsungBrowser: /samsungbrowser/i.test(ua),
isWeChat: /micromessenger/i.test(ua),
isWeCom: /wxwork|wecom/i.test(ua),
isAlipay: /alipayclient/i.test(ua),
isDingTalk: /dingtalk/i.test(ua),
isQQ: /qq\//i.test(ua),
isToutiao: /toutiao|newsarticle/i.test(ua),
isBaiduContainer: /swan\//i.test(ua),
isMiniProgram: /miniprogram/i.test(ua),
isGenericWebView: /webview/i.test(ua),
isAndroidWV: /; wv\)/i.test(ua) || /\bwv\b/i.test(ua),
isIOS: /iphone|ipad|ipod/i.test(ua),
isAndroid: /android/i.test(ua),
isElectron: /electron/i.test(ua),
};
五、一句话结论
H5 的运行环境不只是 Chrome、Safari 这些独立浏览器，还包括：
- App 内嵌浏览器
- 系统 WebView
- 小程序容器
- 桌面客户端容器
所以前端判断 UA 时，重点不是只看“浏览器品牌”，而是看：
页面到底运行在普通浏览器里，还是运行在某个宿主容器里。
