web-dev-qa-db-de.com

Bildschirmauflösung in einer PhoneGap-App

Ich schreibe eine Phonegap (3.2) -App, ich nehme eine HTML5-Leinwand, mache sie als Vollbild und die gesamte Benutzeroberfläche der App befindet sich auf dieser Leinwand.

Bei einem Samsung Galaxy S4 (Android 4.3) zum Testen der App beträgt die Bildschirmauflösung der App nur 360X640 und nicht 1080X1920, wie ich es gerne hätte.

Was muss getan werden, damit die App die maximal mögliche Bildschirmauflösung verwendet?

Ich habe Screenshots hinzugefügt 1) // Sieht in Ordnung aus, aber eine schlechte Auflösung

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

2) // Nimmt einen kleinen Teil des Bildschirms ein, der Rest ist weiß

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

3) // Nur ein kleiner Teil des Bildes ist sichtbar, als wäre das Bild bei 1080X1920, aber der Bildschirm ist "zu klein".

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

und hier ist der vollständige Code:

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

Vielen Dank.

html5canvascordovawebviewresolution
12
Miko Diko

Eine Lösung, die sowohl mit dem Problem der Auflösung als auch mit dem Berührungsereignis arbeitet (das mit Kens Post kam):

<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" />

In der <Kopf>

Danke Ken, dass du versucht hast zu helfen :))

19
Miko Diko

Versuchen Sie etwas so:

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

(oder ein absoluter Wert für die CSS-Regel).

Bei Geräten, bei denen das Pixelverhältnis höher als das typische 1: 1 ist, wird eine Leinwand mit höherer Auflösung angezeigt. Für normale Umstände ist alles normal.

12
user1693593

window.innerWidth und window.innerHeight geben nicht unbedingt die tatsächlichen Bildschirmabmessungen an. 

Versuchen Sie es stattdessen:

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

target-densitydpi im Meta-Tag in Mikos Beitrag ist in Chrome veraltet und sollte nicht verwendet werden. 

Versuchen Sie stattdessen Folgendes:

index.html:

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

Sie sollten auch die Verwendung der Phaser-Methoden zur Skalierung in Betracht ziehen, z.

Boot.js:

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

Verwenden Sie für die Leistung die kleinsten Abmessungen unabhängig von der Auflösung des Geräts. Lassen Sie das Leinwandobjekt von Phaser erstellen.

Game.js:

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

Die gesamte Leinwand wird vom ScaleManager automatisch skaliert. Dies verlangsamt jedoch die App, wenn Leistung erforderlich ist - insbesondere bei einer großen Leinwand. Mit EXACT_FIT wird die Leinwand gedehnt, während SHOW_ALL die Größe ändert, so dass die gesamte Leinwand auf den Bildschirm passt, ohne das Seitenverhältnis zu ändern (wodurch Ränder wie bei Ihnen vorhanden bleiben können). 

1
Victor Stoddard