Why do not the applications work on the tablet?

miguelito · October 28, 2017

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 = &nbsp; </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";
        }
    }
}

Sign In

Why do not the applications work on the tablet?

Recommended Posts

miguelito

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity