logo标签列表

在PhoneGap应用中的屏幕分辨率

htmlcanvascordovawebviewresolution
12

我正在编写一个 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，但屏幕“太小”了。 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>

谢谢。

3个回答
22

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

在 < head > 中

感谢 Ken 尝试帮助兄弟 :))

1
不错。我完全忘记了这件事 :) - user1693593
12
尝试像这样做：

尝试像这样做：

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

1
你接近了：），如果我这样做，它就能工作：canvasMain.style.width = "360px"; /// 画布的CSS大小 canvasMain.style.height = "640px"; - Miko Diko
1
现在我遇到了一个新问题，当这个画布上发生触摸事件时，我得到的是一个 360X640 屏幕的坐标，而不是 1080X1920 的坐标。 最大的 X 值是 360 而不是 1080。 你知道如何解决这个问题吗？ - Miko Diko
@MikoDiko 这是缩放画布宽度 CSS 的问题之一（这在这里是必要的）。你只需使用比例将坐标 x/y 放大，或通过将真实画布大小除以显示大小来创建比例。希望能帮到你。 - user1693593
是的，我考虑过这个问题，但是我有一个抽屉，当画“几乎直线”的时候，这是一个大问题，因为最小曲线是“像素比”，而不仅仅是1。一定有一个好的解决方案。 - Miko Diko
请注意，您处理的是pixelRatio而不是backingStoreRatio，后者在某些著名设备上使用。此外，这些比率可能是非整数（例如1.2），因此您需要四舍五入宽度/高度以获取canvas和css的有效值（但无论如何，您都不应像上面所说的那样使用css）。 - GameAlchemist
显示剩余2条评论
1

window.innerWidth和window.innerHeight并不一定能给出真实的屏幕尺寸。

可以试试这个方法：

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

target-densitydpi在Miko的文章中的meta标签已经被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将调整大小，使整个画布适合屏幕而不改变其纵横比（这可能会留下像你所拥有的边距）。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接