PhoneGap 앱 화면 해상도

Phonegap (3.2) 앱을 쓰고 있습니다. HTML5 캔버스를 사용하여 전체 화면으로 만들고 전체 앱 UI가이 캔버스에 있습니다.PhoneGap 앱 화면 해상도

삼성 갤럭시 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;

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

및 전체 코드입니다. 이 같은

출처

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

시도 뭔가 :

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;

target-densitydpi은 크롬에서 더 이상 사용되지 않습니다.

대신 다음을 시도하십시오.

index.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 앱 화면 해상도

답변

관련 문제