PhoneGap App上的屏幕分辨率

我正在编写Phonegap（3.2）应用程序，我使用HTML5画布，使其全屏，并且整个应用程序UI均位于此画布上。PhoneGap App上的屏幕分辨率

使用三星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>

感谢。

来源

2013-12-11 Miko Diko

是正在与双方的分辨率和触控事件的问题（与Ken的此帖一）A液：

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

在<头>

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

来源

2013-12-11 11:08:38

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

尝试这样：

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

来源

2013-12-11 05:22:49 K3N

你们近了:)，它工作如果我： canvasMain.style.width =“360px”; ///画布的CSS尺寸 canvasMain.style.height =“640px”; –

@MikoDiko是的，我忘了在那里设置px，谢谢:) – K3N

现在我遇到了一个新问题，当在这个画布上有一个触摸事件时，我得到一个360X640屏幕的坐标而不是1080X1920。最大的X是360 ..不是1080. 你也许知道如何解决这个问题？ –

window.innerWidth和window.innerHeight不一定会给你真正的屏幕尺寸。

试试这个：

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

在巫女的帖子的meta标签target-densitydpi在Chrome中已被弃用，不应该使用。

请改为尝试以下操作：

索引。HTML：

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

您还应该考虑使用移相器对缩放方法，像这样：

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

来源

2015-12-18 03:57:26

PhoneGap App上的屏幕分辨率

回答

相关问题