Why do not the applications work on the tablet?
Hi. I'm starting to create mobile apps with Cordova, for Android. I have small tests done with the help of peers
of this community.
But the problem is that I try to run them on the tablet and the interface only sees a small sample of
of the content. It does the job, but it goes much slower than on the mobile.
I imagine the key will be in css.
My question is, if I should add some plugin, configure css in some particular way, or some other file I must
do something What do I need to work on tablets and phones?
Maybe I do not explain very well or I do not give concrete data, but I can not think of it, I leave a sample of the code in case it is worth something.
Regards, and thank you very much.
Sorry for the spelling but I have to use the translator.
* {
box-sizing: border-box;
}
.main {
margin: 10px auto;
width: 400px;
height: 400px;
margin-bottom: 5px;
}
body {
background: grey;
}
#score{
float: left
}
.time{
float:right;
margin-right: 0px;
}
#start:hover{
background-color:#477f4e;
}
#start{
width:80px;
margin-left:220;
margin-right:auto;
margin-bottom:50px;
border-style:solid;
border-radius:15px;
border-width:1px;
margin-top:7px;
font-size:18px;
}
h1,
p {
font-family: open sans;
margin: 5px auto;
text-align: center;
font-size: 95%;
}
.board {
background: rgba(0, 0, 0, 0.15);
position: relative;
width: 90%;
padding-bottom: 90%;
margin: 50px auto;
border: 1px solid black;
z-index: 0;
box-shadow: 0px 0px 7px black inset;
overflow: hidden;
}
.box {
position: absolute;
height: 33.33%;
width: 33.33%;
float: left;
transition: 0.5s;
background-image: url("../img/bob-patricio.jpg");
box-shadow: 0px 0px 7px black;
background-size: 300%;
}
.border {
width: 100%;
height: 100%;
border: 1px solid black;
}
div.one {
background-position: 0% 0%;
}
div.two {
background-position: -100% 0%;
}
div.three {
background-position: -200% 0%
}
div.four {
background-position: 0% -100%
}
div.five {
background-position: -100% -100%;
}
div.six {
background-position: -200% -100%;
}
div.seven {
background-position: 0% -200%;
}
div.eight {
background-position: -100% -200%;
}
div.nine {
background-position: -200% -200%;
}
#music{
display: none;
autoplay: true;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/javascript" href="js/index.css">
<title>Document</title>
</head>
<body>
<body>
<div id="container">
<div id="score">Movimientos = 0</div>
<div class="time" id="sec">00</div>
<div class="time">:</div>
<div class="time" id="min">0</div>
<div class="time">TIEMPO = </div>
<div id="start">
<span onclick="getNum()">INICIAR </span>
</div>
<div class="main">
<div class="board" id="board">
<div class="box one" id="1" onclick="change(1,0,0,1,1,0,0,1,1)" style="top:0%;left:0%;">
<div class="border"> </div>
</div>
<div class="box two" id="2" onclick="change(2,1,0,1,1,0,0,0,1)" style="top:0%;left:33.33%;">
<div class="border"> </div>
</div>
<div class="box three" id="3" onclick="change(3,1,0,0,1,1,0,0,1)" style="top:0%;left:66.66%;">
<div class="border"> </div>
</div>
<div class="box four" id="4" onclick="change(4,0,1,1,1,0,0,1,0)" style="top:33.33%;left:0%;">
<div class="border"> </div>
</div>
<div class="box five" id="5" onclick="change(5,1,1,1,1,0,0,0,0)" style="top:33.33%;left:33.33%;">
<div class="border"> </div>
</div>
<div class="box six" id="6" onclick="change(6,1,1,0,1,1,0,0,0)" style="top:33.33%;left:66.66%;">
<div class="border"> </div>
</div>
<div class="box seven" id="7" onclick="change(7,0,1,1,0,0,1,1,0)" style="top:66.66%;left:0%;">
<div class="border"> </div>
</div>
<div class="box eight" id="8" onclick="change(8,1,1,1,0,0,1,0,0)" style="top:66.66%;left:33.33%;">
<div class="border"> </div>
</div>
<div class="box nine" id="9" onclick="change(9,1,1,0,0,1,1,0,0)" style="top:66.66%;left:66.66%;">
<div class="border"> </div>
</div>
</div>
</div>
</div>
<img src="img\bob feliz.png">
<iframe src="audio\BobEsponjaRemix.mp3" id="music"></iframe>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
window.onload = alert("Hola...! disfruta de mi juego \nHaz clic en 'INICIAR', entonces debes colocar la imagen ... \nAsí que haz clic en la imagen...");
//establecemos el tiempo y los movimientos
var steps = 0;
var sec = "00";
var min = 0;
var seconds;
var minuts;
var div_sec = document.getElementById('sec');
var div_min = document.getElementById('min');
var classNames = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
function startTimer() {
seconds = setInterval(secTimer, 1000); minuts = setInterval(minTimer, 60000);
}
function secTimer() {
sec++;
if (sec < 10) {
sec = "0" + sec;
}
else if (sec > 59) {
sec = "0" + 0;
}
div_sec.innerHTML = sec;
}
function minTimer() {
min++;
div_min.innerHTML = min;
}
function clearTimer() {
clearInterval(seconds);
clearInterval(minuts);
}
function resetTimer() {
sec = "00";
min = 0;
div_sec.innerHTML = sec;
div_min.innerHTML = min;
}
//cambiando la imagen
var numbers = document.getElementsByClassName("box");
function change(x, left, up, right, down, left2, up2, right2, down2) {
var id = x;
if (left == true && verIfEmpty(id - 1) == true) {
steps++;
changeContent(id, id - 1);
}
else if (left2 == true && verIfEmpty(id - 2) == true) {
steps++;
changeContent(id - 1, id - 2);
changeContent(id, id - 1);
}
else if (up == true && verIfEmpty(id - 3) == true) {
steps++;
changeContent(id, id - 3);
}
else if (up2 == true && verIfEmpty(id - 6) == true) {
steps++;
changeContent(id - 3, id - 6);
changeContent(id, id - 3);
}
else if (right == true && verIfEmpty(id + 1) == true) {
steps++;
changeContent(id, id + 1);
}
else if (right2 == true && verIfEmpty(id + 2) == true) {
steps++;
changeContent(id + 1, id + 2);
changeContent(id, id + 1);
}
else if (down == true && verIfEmpty(id + 3) == true) {
steps++;
changeContent(id, id + 3);
}
else if (down2 == true && verIfEmpty(id + 6) == true) {
steps++;
changeContent(id + 3, id + 6);
changeContent(id, id + 3);
}
}
function verIfEmpty(x) {
var a = document.getElementById(x);
var c = a.innerHTML;
if (c === "") {
y = true;
} else {
y = false;
}
return y;
}
//Esta parte funciona gracias a Asier Villanueva
function changeContent(x, y) {
var m = document.getElementById(x);
var n = document.getElementById(y);
n.innerHTML = m.innerHTML;
n.className = m.className;
m.innerHTML = "";
m.className = "";
win();
showScore();
ok();
}
//este generador aleatorio que encontré en internet
function randomGenerator(low, high) {
if (arguments.length < 2) {
high = low;
low = 0;
}
this.low = low;
this.high = high;
this.reset();
}
randomGenerator.prototype = {
reset: function () {
this.remaining = [];
for (var i = this.low; i <= this.high; i++) {
this.remaining.push(i);
}
},
get: function () {
if (!this.remaining.length) {
this.reset();
}
var index = Math.floor(Math.random() * this.remaining.length);
var val = this.remaining[index];
this.remaining.splice(index, 1);
return val;
}
}
//escribe los números al azar en el rompecabezas
//Esta parte funciona gracias a Asier Villanueva
function getNum() {
var randomNoRepeatNumbers = new randomGenerator(0, 8);
for (var i = 1; i <= 9; i++) {
var newNumbers = document.getElementById(i);
var rndNumber = randomNoRepeatNumbers.get();
newNumbers.innerHTML = rndNumber;
newNumbers.className = "box " + classNames[rndNumber - 1];
}
for (var i in numbers) {
if (numbers[i].innerHTML == 0) {
numbers[i].innerHTML = "";
numbers[i].className = "";
}
}
steps = 0;
showScore();
verifArray();
clearTimer();
resetTimer();
startTimer();
ok();
}
function win() {
var time = min + ":" + sec;
var win = true;
for (var i in numbers) {
if (numbers[i].innerHTML != numbers[i].id) {
if (numbers[i].id != numbers.length) {
win = false; break;
}
}
}
if (win) {
clearTimer();
function showAlert() {
alert("Has ganado...!!! \nUsted hizo" + steps + "movimientos \nTu tiempo a sido " + min + " min. y " + sec + " sec.");
}
setTimeout(showAlert, 1000);
//Modify the code with the help of @Asier Villanueva and it works perfectly
var celda9 = document.getElementById('9');
celda9.innerHTML = "9";
celda9.className = "box nine";
}
}
function showScore() {
document.getElementById("score").innerHTML = ("MOVES = " + steps);
}
function verifArray() {
var count = 0;
var arrayNum = [];
for (var i = 1; i <= 9; i++) {
var w = document.getElementById(i).innerHTML;
arrayNum[i] = w;
}
for (var i = 0; i <= arrayNum.length - 1; i++) {
for (var n = i + 1; n <= arrayNum.length - 1; n++) {
if (arrayNum[i] > arrayNum[n] && arrayNum[n] != 0) {
count++;
}
}
}
if (count % 2 != 0) {
getNum();
}
}
function ok() {
for (var i = 1; i < 10; i++) {
var x = document.getElementById(i);
if (x.innerHTML == i) {
x.style.color = "#74a57a";
} else {
x.style.color = "#ffffff";
}
}
}
