Android phonegap / bootstrap样式问题

Question

我有一个bootstrap（3.0rc1）应用程序，我开始在Phonegap / Cordova中测试，并且发现了一些样式问题，我不知道如何解决。

我想知道这是否是Bootstrap的问题，或者是否有人遇到过Android嵌入式浏览器在某些样式规则方面表现不佳的问题。

请参阅随附的截图，了解正在发生的事情。您会注意到select基本上没有样式，而输入组按钮根本没有排列。这个确切的页面在Chrome作为常规页面使用时效果很好。输入显示“测试！”是一个选择，以'形式控制'作为一种风格。

您还可以看到其他样式工作正常（输入，按钮，甚至是菜单栏）。

Answer 1

我遇到了同样的问题。在互联网上搜索并结合不同的解决方案 我发现了这个

首先，如果用户代理是android，则此javascript将删除表单控件类 所以你将拥有默认样式。

var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
}

之后你可以添加一些css

select{
  height:25px;
  width:100%;
  border: 1px solid grey;
  -webkit-appearance: listbox;
  background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==); /* a simple arrow img */
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 20px;
  padding-left: 5px;
}

可选你甚至可以添加一些背景颜色

最重要的是

-webkit-appearance: listbox;

也可以设置为

-webkit-appearance: menulist-text;