Question

我正在编写一个Phonegap（3.2）应用程序，我使用HTML5画布，将其全屏显示，整个应用程序UI都在此画布上。

使用三星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，但屏幕太小了＃39;为了它。

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>

感谢。

Answer 1

解决方案同时处理分辨率和触摸事件问题（Ken的帖子附带）：

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

＆lt;头＆gt;

感谢Ken试图帮助兄弟:)）

Answer 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的设备上，您将获得更高分辨率的画布。在正常情况下，一切都正常。

Answer 3

window.innerWidth和window.innerHeight并不一定能为您提供真实的屏幕尺寸。

请改为尝试：

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

Miko的帖子中的元标记中的

target-densitydpi在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创建画布对象。

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将调整它的大小，以便整个画布适合屏幕而不改变其宽高比（可以留下像你所拥有的边距）。

PhoneGap App上的屏幕分辨率

3 个答案: