PhoneGapアプリケーションの画面解像度

PhoneGap（3.2）アプリケーションを作成しています。私はHTML5キャンバスを使ってフルスクリーンにして、このキャンバスにアプリケーションUI全体を表示します。PhoneGapアプリケーションの画面解像度

アプリをテストするためにSamsung Galaxy S4（Android 4.3）を使用すると、アプリの画面解像度は360X640であり、1080X1920ではありません。

可能な最大画面解像度をアプリで使用するためには、何が必要ですか？私はスクリーンショット 1を追加しました

）//はOK悪い解像度

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;

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

ありがとう：ここ enter image description here

とは完全なコードです。

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ルールの絶対値）：

出典

2013-12-11 Miko Diko

（ケンのポストに付属）の両方の解像度とタッチイベントの問題に取り組んでいる解決策：:)）仲間を支援しようとするために<ヘッド>

おかげでケンに

<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

はこのような何かを試してみてください。

ピクセル比が通常の1：1よりも高いデバイスでは、より高い解像度のキャンバスが得られます。通常の状況では、すべて正常です。

出典

2013-12-11 05:22:49 K3N

あなたは近くにいました:)、それはIの場合に動作します： 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;

target-densitydpiはChromeで廃止され、使用すべきではありません。

代わりに、次を試してください。

indexHTML：

<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アプリケーションの画面解像度

答えて

関連する問題