Question

美好的一天，我的问题是android 4.4和4.3上的cordova 就像所有物体向左移动一样：

但是在Android 5.0上它就像：

页面代码：

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <link rel="stylesheet" href="css/phonon.css" />
    <style>
        .uvitani {
            font-size: 250%;
            margin: 0;
            color: white;
            position: absolute;
            top: 40%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%)
        }

        .tlacitko {
            margin: 0;
            color: #0084e7;
            background-color: white;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%)
        }
    </style>
</head>
<script type="text/javascript" charset="utf-8">
    function barva() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }
    function onDeviceReady() {
        if (cordova.platformId == 'android') {
            StatusBar.backgroundColorByHexString("#0065b3");
        }
    }
</script>

<body style="background-color: #0084e7;" onload="barva();">
    <center>
        <p class="uvitani">Vítejte v aplikaci ISAS&nbsp;do&nbsp;kapsy</p>
        <button class="btn tlacitko" onclick='document.location="styl.html";'>Pokračovat</button>
    </center>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</body>

</html>

是否有人知道如何修复它以查看Android 4.4以及Android 5.0（状态栏smozřejmě进入此错误计数）

Answer 1

只需使用webkit前缀，chrome 30（即android 4.4手机的webview）可能不支持transform属性：

.uvitani {
     font-size: 250%;
     margin: 0;
     color: white;
     position: absolute;
     top: 40%;
     left: 50%;
     margin-right: -50%;
     transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, 50%);
}

.tlacitko {
     margin: 0;
     color: #0084e7;
     background-color: white;
     position: absolute;
     bottom: 0;
     left: 50%;
     margin-right: -50%;
     transform: translate(-50%, -50%)
     -webkit-transform: translate(-50%, -50%)
}

Cordova - 所有对象都移到左侧

1 个答案: