Javascript: How to detect if the user is using UC Browser/Mini?

Question

I am creating a website that is not rendered properly in UC Browser/Mini. I am planning to override the style using javascript. Thanks in advance.

Answer 1

Use the navigator.userAgent to see if either Opera Mini or UC Browser is being used.

The following example is how to detect if UCBrowser is being used

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

The navigator.userAgent will return a list of stuff in string. Like the example above, navigation.userAgent will return a string of stuff where "UCBrowser" is included as the javascript is used in UC Browser. So the snippet above therefore indexes for such line and determine the condition should the indexed line be found in the userAgent output.

I am not sure whether this will work since I have trouble trying to test my local files on Opera Mini, but based on my research, the below code may work.

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

Answer 2

Solution

To detect UC Mini in JavaScript:

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

Background

The official Developer Documentation(1) provided by UC documents the various User-Agent strings used in their browsers. The main two patterns are these two, for UC Browser and 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"

One thing to note here is that UC Browser and UC Mini are different apps. UC Browser exists for iPhone/iOS and Android and has various data saver options (including a "Speedmode" option) but isn't related to UC Mini's Speed Mode and doesn't alter the user agent.

UC Mini is only available for Android. In Speed Mode, UC Mini is a proxy browser, meaning its requests are proxied through a remote server. This proxy server adds a "UCWEB" field to the user-agent. Similar to Opera Mini, UC Mini Speed Mode renders the content (including JavaScript) on the remote server. Interestingly, the DOM in this remote web browser reports a different user-agent than its network layer. navigator.userAgent in UC Mini Speed Mode consistently reports the following odd-looking fixed string without any trace of "UCWEB", "UCBrowser" or the client's own user agent:

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

This exact string is used for all clients using UC Mini for Android in Speed Mode. Note the trailing slash, "Linux" and "zh-CN". I suggest using a regex like the following to detect it:

/^Gecko\/$/

Or, slightly more conservative:

/^Mozilla\/5\.0 .+ Gecko\/$/

It's a browser sniffing nightmare, but it's all we've got. To verify, I ran it against a week's worth of Wikipedia production traffic (unsampled, ~100B requests) with zero matches. UC Mini didn't match either, of course, as it only uses that string in the DOM. In theory other browsers may also have DOMs with different user-agent strings, but at least we know it matches nothing currently in use.

• (1) http://www.ucweb.com/download/UCBrowser_User_Agent_en.pdf

Answer 3

navigator.userAgent is what you're looking for, though it is deprecated.

But ideally you don't want to rely on the user agent. (See: https://developer.mozilla.org/en-US/docs/Browser_detection_using_the_user_agent ). If the rendering bug exists in UC Browser/Mini, it may exist in other browsers too. It's better to find a way to fix the bug than to attempt to find and target every browser in which it occurs.