Bildschirmauflösung auf einer PhoneGap-App

Question

Dec 11, 2013, 06:12 AM

Bildschirmauflösung auf einer PhoneGap-App

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

Mit 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 möchte.

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

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

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

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

windowWidth = window.outerWidth; windowHeight = window.outerHeight;

3) // Es ist nur ein kleiner Teil des Bildes sichtbar, als ob das Bild 1080X1920 ist, aber der Bildschirm ist zu klein dafür.

windowWidth = screen.width; windowHeight = screen.height;

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.