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上的屏幕分辨率

回答

相關問題