Question

我正在使用phoneGap开发一款应用程序，该应用程序将在Android系统中使用（并且仅适用于Android）。

今天我生成了.apk文件并在我的Galaxy S4中尝试过，所有这些都是完美的可视化。我使用chrome和chrome开发者控制台开发它，当然达到了完美的可视化效果。我也在＃34;华为G620-L01＆＃34;安卓版本4.4.4完全没有问题，在Android 5.0.2的OnePlus One上完全没有任何问题。

然后我尝试将它安装在带有Android 4.1.2的Acer Iconia B1平板电脑上以及我使用该属性的所有地方：

.class{
    display:flex;
}

CSS3的

我在可视化中遇到了很大的错误。

在我看来，旧的Android版本没有识别CSS3存在问题，但我找不到解决方案，因为所有应该被phonegap和cordova包裹。

我首先想到，当创建.apk文件时，无论你做了什么来创建应用程序，它都是兼容的。

有没有人经历过这样的事情？

我附上一些代码来澄清：

HTML

<tr class="tappable" id="9" placeid="2" tipologyid="3">
    <td class="home-calendario-td">
        <div class="home-calendario">
            <img src="img/img.png">
            <div class="home-cal-desc">
                <div class="home-cal-title">TITLE</div>
                <div class="home-cal-sub-title">Description</div>
            </div></div>
     </td>
</tr>

CSS

.home-calendario{
    display:flex;
    align-items:center;
    flex-direction:row;
}
.home-calendario img{
    height:32px!important;
    width:32px!important;
    min-width:32px!important;
    margin:5px;
    margin-right:25px;
    padding:10px;
    border:1px solid #CCC;
}
.home-calendario .home-cal-desc{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
}
.home-calendario .home-cal-desc .home-cal-title{
    width:100%;
    text-align:left;
    font-weight:bold;
}
.home-calendario .home-cal-desc .home-cal-sub-title{
    width:100%;
    text-align:left;
}

这是（简化的）行为不同的部分之一。还有更多，都涉及到flex。

Answer 1

在Android中，您可以使用PhoneGap在不同的设备上找到不同的结果。发生这种情况是因为每个设备都使用System WebView来呈现您的应用程序。为避免此问题，您可以使用cordova-plugin-crosswalk-webview来防止此问题，从而强制设备使用CrossWalk WebView。

phoneGap和Android版本。 CSS3 Flex问题

1 个答案: