Android上使用Cordova / Phonegap的单选按钮

Question

I am using cordova to develop an app which runs on android, ios and windows phone. The radio buttons appear fine on all devices, apart from 1 android tablet (Samsung Galaxy Tab 2) i have, here is a screen shot of the radio buttons. As you can see, its hard to tell, but the top one is selected.

Here is the same application running on my Samsung S4 phone, and the radio buttons look fine.

The tablet is running android 4.2.2 and the phone is running 4.4.2

How can i get the radio buttons to look better on the tablet?

Answer 1

The reason this happens is probably because the newer Android version is running the Chrome webview while the older is running Samsung's old default stock browser. If you don't like the appearance of the radiobuttons you can style radiobuttons using CSS, here's a generic example that you could adapt yourself.

In order to conditionally set this styling for old versions of Android you could do something like this JavaScript:

var ua = navigator.userAgent;
if( ua.indexOf("Android") >= 0 )
{
  var androidversion = parseFloat(ua.slice(ua.indexOf("Android")+8)); 
  if (androidversion < 4.4)
  {
      // do whatever
  }
}

Of course you should adapt this more specifically to your example, but at least this is a start. Good luck!