PhoneGap 应用程序的屏幕分辨率答案

【问题标题】：Screen Resolution On A PhoneGap AppPhoneGap 应用程序的屏幕分辨率
【发布时间】：2013-12-28 22:44:11
【问题描述】：

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

使用三星 Galaxy S4 (Android 4.3) 测试应用，应用的屏幕分辨率只有 360X640 而不是我想要的 1080X1920。

需要做什么才能使应用使用最大可能的屏幕分辨率？

我添加了屏幕截图 1) // 看起来不错，但分辨率不好

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

2) // 占据屏幕的一小部分，其余部分为白色

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

3) // 只有一小部分图片可见，就好像图片是 1080X1920 但屏幕“太小”了。

windowWidth = screen.width; 窗口高度 = 屏幕高度；

这是完整的代码：

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

谢谢。

【问题讨论】：

标签： html canvas cordova webview resolution

【解决方案1】：

试试这样的：

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

【讨论】：

你很接近 :)，如果我：canvasMain.style.width = "360px"; /// 画布的 CSS 大小 canvasMain.style.height = "640px";
@MikoDiko 是的，我忘了在最后设置 px，谢谢 :)
现在我遇到了一个新问题，当此画布上有触摸事件时，我得到的是 360X640 屏幕的坐标，而不是 1080X1920。最大 X 是 360 .. 不是 1080。你知道如何解决这个问题吗？
@MikoDiko 这是缩放画布宽度 css 的问题（这里是必要的）。您只需使用比例放大坐标 x/y 或通过将真实画布尺寸除以显示尺寸来创建比例。希望这会有所帮助。
是的，我想过，但是我有一个抽屉，画“几乎是直线”的线是个大问题，因为最小曲线是“pixelRatio”而不是简单的1..有成为一个好的解决方案

【解决方案2】：

同时解决分辨率和触摸事件问题的解决方案（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" />

在

感谢肯试图帮助兄弟 :))

【讨论】：

不错。我完全忘记了这个:)

【解决方案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 创建画布对象。

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 将调整它的大小，以便整个画布适合屏幕而不改变其纵横比（这可能会留下与您一样的边距）。

【讨论】：