Risoluzione dello schermo su un'app PhoneGap

Sto scrivendo un'app Phonegap (3.2), prendo un canvas HTML5, lo faccio a schermo intero e l'intera interfaccia utente dell'app è su questa tela.Risoluzione dello schermo su un'app PhoneGap

Utilizzando un Samsung Galaxy S4 (Android 4.3) per testare l'app, la risoluzione dello schermo dell'app è solo 360X640 e non 1080X1920 come voglio che sia.

Cosa è necessario fare per rendere l'app utilizza la massima risoluzione dello schermo possibile?

schermate che ho aggiunto 1) // sembra ok, ma cattiva risoluzione

WindowWidth = window.innerWidth; windowHeight = window.innerHeight; enter image description here

2) // Prende piccola parte dello schermo, resto è bianco

WindowWidth = window.outerWidth; windowHeight = window.outerHeight; enter image description here

3) // Solo una piccola parte dell'immagine è visibile, come se l'immagine fosse 1080X1920 ma lo schermo è "troppo piccolo" per esso.

windowWidth = screen.width; windowHeight = screen.height; enter image description here

e qui è il codice completo:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>PhoneGapTesting</title> 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script> 
    <!-- --> 
    <script type="text/javascript"> 

    var windowWidth; 
    var windowHeight; 

    var canvasMain; 
    var contextMain; 

    var backgroundImage; 

    $(document).ready(function() { 
     windowWidth = window.innerWidth; 
     windowHeight = window.innerHeight; 
     //windowWidth = window.outerWidth; // Only 'window.innerWidth' + 'window.innerHeight' look OK but not max resolution 
     //windowHeight = window.outerHeight; 
     //windowWidth = screen.width; 
     //windowHeight = screen.height; 

     canvasMain = document.getElementById("canvasSignatureMain"); 
     canvasMain.width = windowWidth; 
     canvasMain.height = windowHeight; 
     contextMain = canvasMain.getContext("2d"); 

     backgroundImage = new Image(); 
     backgroundImage.src = 'img/landscape_7.jpg'; 
     backgroundImage.onload = function() { 
      contextMain.drawImage(backgroundImage, 0, 0, backgroundImage.width, backgroundImage.height, 0, 0, canvasMain.width, canvasMain.height); 
     }; 

     $("#canvasSignatureMain").fadeIn(0); 
    }) 

    </script> 
</head> 
<body scroll="no" style="overflow: hidden"> 
    <center> 
     <div id="deleteThisDivButNotItsContent"> 
      <canvas id="canvasSignatureMain" style="border:1px solid #000000; position:absolute; top:0;left:0;"></canvas><br> 
     </div> 
    </center> 
</body> 
</html>

Grazie.

fonte

2013-12-11 Miko Diko

Una soluzione che sta lavorando sia con la risoluzione e il tatto problema evento (che è venuto con il post di Ken):

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Nel < head>

Grazie Ken per cercare di aiutare bro :))

fonte

2013-12-11 11:08:38

Nizza. Ho completamente dimenticato di questo :) – K3N

provare qualcosa di simile:

var windowWidth = window.innerWidth; 
var windowHeight = window.innerHeight; 
var pixelRatio = window.devicePixelRatio || 1; /// get pixel ratio of device 

canvasMain = document.getElementById("canvasSignatureMain"); 

canvasMain.width = windowWidth * pixelRatio; /// resolution of canvas 
canvasMain.height = windowHeight * pixelRatio; 

canvasMain.style.width = windowWidth + 'px'; /// CSS size of canvas 
canvasMain.style.height = windowHeight + 'px';

(o un valore assoluto per la regola CSS).

Su dispositivi in cui il rapporto pixel è superiore al tipico 1: 1 si ottiene una tela a risoluzione più elevata. Per circostanze normali tutto è come al solito.

fonte

2013-12-11 05:22:49 K3N

Eri vicino :), Funziona se: canvasMain.style.width = "360px"; /// Dimensione CSS della tela canvasMain.style.height = "640px"; –

@MikoDiko sì, ho dimenticato di impostare px alla fine, grazie :) – K3N

Ora sono in un nuovo problema, quando c'è un evento touch su questa tela, ottengo le coordinate di uno schermo 360X640 e non 1080X1920. il massimo X è 360 .. non 1080. Sai forse come risolvere questo? –

window.innerWidth e window.innerHeight non forniscono necessariamente le dimensioni reali dello schermo.

Prova a modificare:

windowWidth = window.screen.innerWidth; 
windowHeight = window.screen.innerHeight;

target-densitydpi nel meta tag nel post di Miko è deprecato in Chrome e non deve essere utilizzato.

Invece, provare quanto segue:

indice.html:

<meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0 minimal-ui" />

si dovrebbe anche considerare l'utilizzo di metodi di Phaser per il ridimensionamento, in questo modo:

Boot.js:

var game = new Phaser.Game(1080, 1920, Phaser.CANVAS, ''); //or AUTO mode for WebGL/DOM

Per le prestazioni, utilizzare le dimensioni più piccole che si può prescindere dal risoluzione del dispositivo. Lascia che Phaser crei l'oggetto canvas.

Game.js:

this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; //or SHOW_ALL or RESIZE 
this.scale.pageAlignHorizontally = true; 
this.scale.pageAlignVertically = true;

La vostra intera tela scalerà automaticamente dal ScaleManager, ma questo rallenta l'applicazione verso il basso quando è necessaria prestazioni - in particolare con una grande tela. EXACT_FIT estenderà la tela, mentre SHOW_ALL la ridimensiona in modo che l'intero canvas si adatti allo schermo senza cambiare il suo rapporto (che può lasciare margini come quello che hai).

fonte

2015-12-18 03:57:26

Risoluzione dello schermo su un'app PhoneGap

risposta

Problemi correlati