How to make CSS visible only for Android phone UC browser

Question

Is there a way to make some CSS rules visible only for Android phone UC browser?

Answer 1

Take a look at this article: CSS: User Agent Selectors

Basically, when you use this script:

var b = document.documentElement;
b.setAttribute('data-useragent',  navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

You can now use CSS to target any browser / version.

So for Android UC, I took a look here to see the user agent strings for Android UC and they all contained the text 'UCBrowser' so we can do the following:

FIDDLE

html[data-useragent*='UCBrowser'] .someRules
{
    visibility: visible;/* or display:block etc */
}