3

我有一个引导程序 (3.0rc1) 应用程序，我开始在 Phonegap/Cordova 中进行测试，并且发现了一些我不知道如何解决的样式问题。

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

请参阅随附的屏幕截图了解正在发生的事情。您会注意到 select 基本上没有样式，而 input-group 按钮根本没有对齐。当作为常规页面使用时，这个确切的页面在 Chrome 中效果很好。显示“测试！”的输入 实际上是一个以“表单控制”作为样式的选择。

通过 android 嵌入式浏览器/phonegap 的页面样式问题

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

4

1 回答 1

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;
于 2014-05-23T12:45:58.070 回答