Разрешение экрана в приложении PhoneGap

Я пишу приложение Phonegap (3.2), я беру холст HTML5, делаю его полноэкранным, и весь пользовательский интерфейс приложения находится на этом холсте.

Используя Samsung Galaxy S4 (Android 4.3) для тестирования приложения, разрешение экрана в приложении составляет всего 360X640, а не 1080X1920, как я хочу.

Что необходимо сделать для того, чтобы приложение использовало максимально возможное разрешение экрана?

Я добавил скриншоты 1)//Выглядит хорошо, но плохое разрешение

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

2)//Делает небольшую часть экрана, отдых белый

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

3)//Отображается только небольшая часть изображения, как если бы изображение было на 1080X1920, но экран был "слишком мал" для него.

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

и вот полный код:

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

Спасибо.

Ответы

Ответ 1

Решение, работающее как с разрешением, так и с событием касания (которое появилось с сообщением Кена):

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

В < головa >

Спасибо Кен за попытку помочь брату:))

Ответ 2

Попробуйте что-то вроде этого:

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

(или абсолютное значение для правила css).

На устройствах, где соотношение пикселей выше, чем типичное 1:1, вы получаете холст с более высоким разрешением. Для нормальных обстоятельств все как обычно.

Ответ 3

window.innerWidth и window.innerHeight не обязательно дают вам реальные размеры экрана.

Попробуйте это вместо:

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

target-densitydpi в метатеге в записи Miko устарел в Chrome и не должен использоваться.

Вместо этого попробуйте выполнить следующее:

index.html

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

Вы также должны рассмотреть использование методов Phaser для масштабирования, например:

Boot.js:

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

Для производительности используйте наименьшие размеры, которые вы можете независимо от разрешения устройства. Пусть Phaser создает объект canvas.

Game.js:

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

Весь ваш холст автоматически масштабируется с помощью ScaleManager, но это замедляет приложение вниз, когда требуется производительность - особенно с большим холстом. EXACT_FIT растянет холст, а SHOW_ALL изменит его размер так, чтобы весь холст вписывался в экран без изменения его соотношения сторон (который может оставить поля, подобные тому, который у вас есть).