Lukas Plevac Developer Lukas Plevac Developer - 3 months ago 10
HTML Question

Cordova - all objects are moved to the left

Good day,
My problem is cordova on android 4.4 and 4.3
It like as all Object shift to the left:

enter image description here

But on android 5.0 it like:

enter image description here

Code of page:



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


Does anyone know how to fix it to look at Android 4.4, as well as on Android 5.0 ( Statusbar smozřejmě into this error counting )

Answer

Just use webkit prefix, chrome 30 (that's the webview of android 4.4 phones) maybe doesn't support transform property :

.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%)
}
Comments