Résolution d'écran sur une application PhoneGap

Je suis en train d'écrire un Phonegap (3.2) application, je prends un HTML5 canvas, faire le plein écran et l'ensemble de l'INTERFACE utilisateur de l'application est sur cette toile.

À l'aide d'un Samsung Galaxy S4 (Android 4.3) pour tester l'application, la résolution de l'écran de l'application est uniquement 360x640 italiano et pas 1080X1920 comme je le veux.

Ce qui est nécessaire pour être effectués dans l'ordre à faire l'application d'utiliser le maximum possible la résolution de l'écran ?

J'ai ajouté les captures d'écran
1) //Semble OK mais une mauvaise résolution

windowWidth = fenêtre.innerWidth;
windowHeight = fenêtre.innerHeight;
Résolution d'écran sur une application PhoneGap

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

windowWidth = fenêtre.outerWidth;
windowHeight = fenêtre.outerHeight;
Résolution d'écran sur une application PhoneGap

3) //une petite partie Seulement de l'image est visible, comme si l'image est à 1080X1920 mais l'écran est "trop petit" pour lui.

windowWidth = écran.largeur;
windowHeight = écran.hauteur;
Résolution d'écran sur une application PhoneGap

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>

Grâce.

source d'informationauteur Miko Diko

17

Une solution qui fonctionne à la fois la résolution et le toucher d'événement de problème (ce qui est arrivé avec Ken post):
```
<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 le < head >

Merci Ken pour essayer d'aider bro :))

Essayer quelque chose comme cela:

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 de la règle css).

Sur les appareils où le pixel ratio est plus élevé que le 1:1, vous obtenez une résolution supérieure de la toile. Pour des circonstances normales, tout est normal.

1

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

Essayez plutôt ceci:
```
windowWidth = window.screen.innerWidth; 
windowHeight = window.screen.innerHeight; 
```
target-densitydpi dans la balise meta dans Miko post est obsolète dans google 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 l'utilisation de Phaser les méthodes de mise à l'échelle, comme ceci:

Boot.js:
```
var game = new Phaser.Game(1080, 1920, Phaser.CANVAS, ''); //or AUTO mode for WebGL/DOM
```
Pour la performance, les plus petites dimensions que vous pouvez indépendamment du dispositif de la résolution. Laissez Phaser créer l'objet canevas.

Game.js:
```
this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; //or SHOW_ALL or RESIZE
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;
```
L'ensemble de votre toile sera mis à l'échelle automatiquement par le ScaleManager, mais cela ralentit l'application vers le bas lorsque la performance est nécessaire, surtout avec une grande toile. EXACT_FIT permet d'étirer la toile, alors que SHOW_ALL va la redimensionner, de sorte que l'ensemble de la toile s'adapte à l'écran sans changer son rapport d'aspect (qui peuvent laisser des marges comme celui que vous avez).

Vous devez vous connecter pour publier un commentaire.