logo标签列表

JavaScript：如何检测用户是否使用UC浏览器/迷你版？

javascript
6

我正在创建一个网站，在UC浏览器/迷你版中无法正确渲染。 我计划使用JavaScript覆盖样式。 提前感谢。

1
用户代理字符串没有给您这些信息吗？navigator.userAgent https://www.whatismybrowser.com/developers/tools/user-agent-parser/browse/browser-name/uc-browser-user-agents - mwilson
3个回答
6

使用navigator.userAgent来检测是否使用了Opera Mini或者UC Browser。

以下示例演示如何检测是否使用了UCBrowser：

if (navigator.userAgent.indexOf(' UCBrowser/') >= 0) {
   //  do stuff here
}

navigator.userAgent会返回一个字符串列表。像上面的例子，navigator.userAgent将返回一个包含“UCBrowser”的字符串列表，因为javascript在UC浏览器中使用。所以上面的代码片段索引这样的行并确定是否应该在userAgent输出中找到已索引的行。

我不确定这是否有效，因为我试图在Opera Mini上测试我的本地文件时遇到了麻烦，但根据我的研究，下面的代码可能有效。

if (navigator.userAgent.indexOf('Opera Mini') >= 0) {
   //  do stuff here
}
4

解决方案

在JavaScript中检测UC Mini：

if (navigator.userAgent.match(/^Mozilla\/5\.0 .+ Gecko\/$/)) {
    // ...
}

背景

UC官方提供了开发者文档(1)，其中记录了他们浏览器中使用的各种用户代理字符串。主要有两个模式，一个用于UC浏览器，另一个用于UC Mini。

# UC Browser
"Mozilla/5.0 (..) .. UCBrowser/10.7.9.856 U2/1.0.0 .."

# UC Mini with Speed Mode on (enabled by default)
"UCWEB/2.0 (..) .. UCBrowser/10.7.9.856 U2/1.0.0 Mobile"

需要翻译的内容如下：

需要注意的一点是，UC浏览器和UC Mini是 不同的应用程序。UC浏览器适用于iPhone/iOS和Android，并具有各种数据节省选项（包括“速度模式”选项），但与UC Mini的Speed Mode无关，也不会更改用户代理。

UC Mini仅适用于Android。在Speed Mode中，UC Mini是一个 代理浏览器，意味着它的请求通过远程服务器进行代理。此代理服务器向用户代理添加了“UCWEB”字段。类似于Opera Mini，UC Mini Speed Mode在远程服务器上呈现内容（包括JavaScript）。有趣的是，此远程Web浏览器中的DOM报告与其网络层不同的用户代理。UC Mini Speed Mode中的navigator.userAgent始终报告以下奇怪的固定字符串，没有任何“UCWEB”、“UCBrowser”或客户端自己的用户代理的痕迹：

Mozilla/5.0 (X11; U; Linux i686; zh-CN; r:1.2.3.4) Gecko/

这个精确的字符串用于所有使用UC Mini for Android在速度模式下的客户端。请注意末尾的斜杠、“Linux”和“zh-CN”。我建议使用以下正则表达式来检测它：

/^Gecko\/$/

或者，稍微保守一点：
/^Mozilla\/5\.0 .+ Gecko\/$/

这是一个浏览器嗅探的噩梦，但这是我们现在唯一能用的。为了验证，我对一周的维基百科生产流量（非抽样，约100B请求）进行了测试，发现没有匹配项。UC Mini当然也不匹配，因为它只在DOM中使用该字符串。理论上，其他浏览器可能也有包含不同用户代理字符串的DOM，但至少我们知道它目前与任何正在使用的内容都不匹配。
(1) http://www.ucweb.com/download/UCBrowser_User_Agent_en.pdf
1
对于可靠的JS信号：如果您枚举插件，UCMini有一个特定的插件称为“QvodInsert”。此外，document.clientWidth和window.outerWidth都为0。这就是我使用的方法。 - hexalys
1
1
一个好的答案不需要访问外部链接来回答问题。请在您的答案中包括这些页面的相关部分。 - 4castle
1
@4castle 编辑后，减少了点击链接的需求。感谢您的建议。 - user2384183
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接