2016-08-27 5 views
0

良い一日に移動され、 私の問題は、それが左に、すべてのオブジェクトのシフトなどのようなアンドロイド4.4と4.3 にコルドバである:コルドバ - すべてのオブジェクトが残って

enter image description here

しかし、アンドロイド5.0、それに以下のような:ページの

enter image description here

コード:

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

誰でもアンドロイド4.4を見て、同様のAndroid 5.0

答えて

1

ちょうどWebKitの接頭辞を使用します(このエラーカウントにステータスバーのsmozřejmě)、クロム30(上のようにそれはアンドロイドのWebViewのだし、それを修正する方法を知っています4.4の電話機)は、変換プロパティをサポートしていない可能性があります。

.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%) 
} 
関連する問題