Question

有人知道PhoneGap的Android浏览器是否支持CSS3 flex box吗？当我在浏览器中运行代码时，它可以正常工作，但是当涉及到我的Android设备时，它无法正常工作。

以下是代码：

.di {
    float:left;
    width:100%;
    text-align:left;
    display:flex;
}

.di span {
    background:url('img/smallphone.png') no-repeat;
    height:15px;
    border:1px solid #005522;
    float:left;
    width:24.2%;
    text-align:center;
    border-radius: 10px;
    background-color:white;
    flex:1
}

Answer 1

实际上，phonegap不支持任何CSS。

Phonegap使用webview，这意味着它使用设备的默认浏览器。

所以css支持取决于设备的浏览器，这意味着如果你在Android 2.3,4.0,4.1或4.4上运行它，你将拥有相同应用程序的不同css行为。

如果您使用不同品牌的设备，有时对于给定版本的Android，支持可能会有所不同。

这是phonegap的主要问题。

也就是说，从Android 2.1：http://caniuse.com/#feat=flexbox开始支持flex框，但你需要添加前缀-webkit

试试这个：

.di {
    float:left;
    width:100%;
    text-align:left;
    display: -webkit-flex;
    display:flex;
}
.di span {
    background:url('img/smallphone.png') no-repeat;
    height:15px;
    border:1px solid #005522;
    float:left;
    width:24.2%;
    text-align:center;
    border-radius: 10px;
    background-color:white;
    -webkit-flex: 1;
    flex:1;
}

Android PhoneGap不支持CSS3 Flexbox

1 个答案: