J'écris une application téléphonique (3.2), je prends une toile HTML5, rendez-la en plein écran et l'UI de l'application entière est sur cette toile.
Utilisation d'un Samsung Galaxy S4 (Android 4.3) pour tester l'application , la résolution de l'écran de l'application est seulement 360x640 et non 1080x1920 comme si je le souhaite. p>
Que faut-il faire pour que l'application utilise la résolution d'écran maximale possible? P >
J'ai ajouté des coups d'écran 1) // a l'air ok mais mauvaise résolution p>
windowwidth = fenêtre.innerWidth;
fenêtreHeight = window.innerheight;
p>
2) // prend une petite partie de l'écran, le repos est blanc p>
windowwidth = fenêtre.Terwidth;
fenêtreheight = window.outerheight;
p>
3) // Seule une petite partie de la photo est visible , comme si l'image est à 1080x1920, mais l'écran est «trop petit» pour celui-ci. p>
windowwidth = écran.Width;
fenêtreHeight = écran.Height;
p>
et voici le code complet: p>
<!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>
3 Réponses :
Essayez quelque chose comme ceci: (ou une valeur absolue pour la règle CSS). sur des périphériques où le rapport de pixel est supérieur au 1: 1: 1 Vous obtenez une toile de résolution plus élevée. Pour des circonstances normales, tout est aussi normal.
Vous étiez fermé :), ça marche si je: canvasmain.style.width = "360px"; /// Taille CSS de toile Canvasmain.style.Height = "640px";
@Mikodiko ouais, j'ai oublié de mettre Px à la fin là-bas, merci :)
Maintenant, je suis dans un nouveau problème, lorsqu'il y a un événement tactile sur cette toile, je reçois des coordonnées d'un écran 360x640 et non de 1080x1920. Le max x est 360 .. pas 1080. Savez-vous peut-être comment résoudre ce problème?
@Mikodiko Il est sur les problèmes avec la largeur de toile de mise à l'échelle CSS (qui est nécessaire ici). Vous évoluez simplement la coordonnée X / Y à l'aide du rapport ou créez un rapport en divisant la taille de toile réelle à la taille d'affichage. J'espère que cela t'aides.
Oui j'y ai pensé, mais j'ai un tiroir, et c'est un gros problème lors du dessin des lignes «presque droites», car la courbe minimale est «pixelratio» et pas simplement 1 .. Il doit y avoir une bonne solution
Ce n'est pas une bonne solution. Le contexte2D d'un canevas, lorsque le rapport de pixel est 2, a déjà la bonne résolution. En le doublant à nouveau, vous finissez par gaspiller des performances et une mémoire, par un facteur 4X (chaque point comporte 4 points de support). La bonne solution consiste à avoir à portée de main une image de double taille que vous dessinez avec une échelle (0,5, 0.5), pour atteindre les «sous-pixels» de la toile.
Notez également que 1) Vous faites face à PixelRatio mais pas de BackingStorratio, qui est utilisé sur certains appareils célèbres, et que 2) ces ratios pourraient être des non-entiers (1.2 par exemple), vous devez donc rond de la largeur / hauteur pour obtenir des valeurs valides. Pour Toile et CSS (mais de toute façon, vous ne devriez pas utiliser CSS comme indiqué ci-dessus).
Une solution qui travaille avec la résolution et la question de l'événement tactile (qui est venue avec le message de Ken): dans la merci ken pour essayer Pour aider Bro :))
Joli. J'ai oublié complètement ça :)
Essayez cela à la place: P> fenêtre.innerwidth code> et window.innerheight code> ne vous donne pas nécessairement les dimensions de l'écran réel. this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; //or SHOW_ALL or RESIZE
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;