Android PhoneGap不支持CSS3 Flexbox

2014-02-18 88 views 1 likes

有谁知道PhoneGap的Android浏览器是否支持CSS3弹性盒？当我在浏览器中运行代码时，它工作正常，但是当涉及到我的Android设备时，它不起作用。Android PhoneGap不支持CSS3 Flexbox

下面是代码：

.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 
}

来源

2014-02-18 Irshad kk

虽然这在逻辑上是有意义的，一切我读似乎同意它不是真的。我在phonegap应用程序中运行完全相同的代码，并在同一设备的浏览器中运行完全相同的代码，浏览器使用flexbox正确显示元素，而phonegap则不正确。相同代码相同设备的不同结果 –

回答

其实，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但你需要添加前缀-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; 
}

来源

2014-02-18 17:56:17 QuickFix

Android PhoneGap不支持CSS3 Flexbox

回答

相关问题