web-dev-qa-db-fra.com

Résolution d'écran sur une application PhoneGap

J'écris une application Phonegap (3.2), je prends une toile HTML5, je la fais en plein écran et l'interface utilisateur entière de l'application se trouve sur cette toile.

En utilisant un Samsung Galaxy S4 (Android 4.3) pour tester l'application, la résolution d'écran de l'application n'est que de 360X640 et non de 1080X1920 comme je le souhaite.

Que faut-il faire pour que l'application utilise la résolution d'écran maximale possible?

J'ai ajouté des captures d'écran 1) // On dirait bien mais la résolution est mauvaise

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

2) // prend une petite partie de l'écran, le reste est blanc

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

3) // Seule une petite partie de l'image est visible, comme si l'image était en 1080X1920 mais que l'écran était 'trop petit' pour cela.

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

et voici le code complet:

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

Merci.

html5canvascordovawebviewresolution
12
Miko Diko

Une solution qui fonctionne à la fois avec la résolution et le problème d'événement tactile (fourni avec le message de 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" />

Dans la <tête>

Merci Ken d'essayer d'aider frère :))

19
Miko Diko

Essayez quelque chose comme ça:

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

(ou une valeur absolue pour la règle css).

Sur les périphériques où le taux de pixels est supérieur au 1: 1, vous obtenez un canevas de résolution supérieure. Pour des circonstances normales, tout est comme d'habitude.

12
user1693593

window.innerWidth et window.innerHeight ne vous donnent pas nécessairement les dimensions réelles de l'écran. 

Essayez ceci à la place:

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

target-densitydpi dans la balise Meta du message de Miko est obsolète dans Chrome et ne doit pas être utilisé. 

Au lieu de cela, essayez ce qui suit:

index.html:

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

Vous devriez également envisager d'utiliser les méthodes de dimensionnement de Phaser, comme ceci:

Boot.js:

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

Pour des performances optimales, utilisez les plus petites dimensions possibles, quelle que soit la résolution du périphérique. Laissez Phaser créer l'objet de travail.

Game.js:

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

Votre grille entière sera automatiquement mise à l'échelle par le ScaleManager, mais cela ralentira l'application lorsque des performances sont nécessaires, en particulier avec une grande grille. EXACT_FIT étendra le canevas, tandis que SHOW_ALL le redimensionnera afin que tout le canevas s'adapte à l'écran sans changer son rapport de format (ce qui peut laisser des marges similaires à celle que vous avez). 

1
Victor Stoddard