स्क्रीन संकल्प एक PhoneGap अनुप्रयोग

मैं एक Phonegap (3.2) अनुप्रयोग लिख रहा हूँ, मैं एक एचटीएमएल 5 कैनवास लेते हैं, यह पूर्ण स्क्रीन और पूरे एप्लिकेशन यूआई इस कैनवास पर है।स्क्रीन संकल्प एक PhoneGap अनुप्रयोग

ऐप का परीक्षण करने के लिए एक सैमसंग गैलेक्सी एस 4 (Android 4.3) का उपयोग करना, एप्लिकेशन के स्क्रीन रिज़ॉल्यूशन केवल 360x640 और नहीं 1080x1920 है जैसे मैं इसे होना चाहते हैं।

क्या जरूरत है इन-आदेश एप्लिकेशन अधिकतम संभव स्क्रीन रिज़ॉल्यूशन का उपयोग करने के लिए किया जाना?

मैं जोड़ दिया है स्क्रीन शॉट्स 1) // ठीक लेकिन खराब संकल्प

लगता

windowWidth = window.innerWidth; विंडोहेइट = window.innerHeight; enter image description here

2) // स्क्रीन के छोटा सा हिस्सा लेता है, बाकी सफेद है

windowWidth = window.outerWidth; विंडोहेइट = window.outerHeight; enter image description here

3) // चित्र का केवल एक छोटा सा हिस्सा दिखाई देता है, जैसे कि छवि 1080X1920 पर है लेकिन स्क्रीन इसके लिए 'बहुत छोटी' है।

windowWidth = screen.width; विंडोहेइट = स्क्रीन.हेइट;

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

(या सीएसएस नियम के लिए एक निरपेक्ष मान)।

उपकरणों पर जहां पिक्सेल अनुपात ठेठ 1 से अधिक है: 1 यदि आप एक उच्च संकल्प कैनवास मिलता है। सामान्य परिस्थितियों के लिए सब कुछ सामान्य है।

स्रोत

2013-12-11 05:22:49 K3N

आप करीब थे :), यह काम करता है अगर मैं: canvasMain.style.width = "360px"; /// कैनवास का सीएसएस आकार canvasMain.style.height = "640px"; –

@MikoDiko हाँ, मैं अंत में पीएक्स सेट करना भूल गया, धन्यवाद :) – K3N

अब मैं एक नई समस्या में हूं, जब इस कैनवास पर टच-इवेंट होता है, तो मुझे 360X640 स्क्रीन के निर्देशांक मिलते हैं और 1080X1920 नहीं। अधिकतम एक्स 360 है .. 1080 नहीं। क्या आप शायद इसे ठीक करने के बारे में जानते हों? –

window.innerWidth और window.innerHeight जरूरी आप वास्तविक स्क्रीन आयाम देना नहीं है।

कोशिश यह बजाय:

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

मीको पद में मेटा टैग में target-densitydpi क्रोम में बहिष्कृत है और नहीं किया जाना चाहिए।

इसके बजाय, निम्न का प्रयास करें:

अनुक्रमणिका।एचटीएमएल:

<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

प्रदर्शन के लिए, का उपयोग सबसे छोटी आयाम है कि आप की परवाह किए बिना कर सकते हैं डिवाइस का संकल्प। फ़ेज़र को कैनवास ऑब्जेक्ट बनाने दें।

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 अनुप्रयोग

उत्तर

संबंधित मुद्दे