फोनगैप, jQuery मोबाइल और रेटिना डिस्प्ले

Question

मैं jQuery मोबाइल का उपयोग कर फ़ोनगैप एप्लिकेशन पर काम कर रहा हूं। वर्तमान में मैं केवल आईफोन और आईफोन रेटिना-सिमुलेटर में परीक्षण कर रहा हूं।

जब मैं रेटिना-मोड में एप्लिकेशन खोलता हूं, तो एप्लिकेशन का घनत्व सही होता है लेकिन पृष्ठ दोनों आयामों पर केवल स्क्रीन आकार का आधा होता है।

मेरा खुद का अनुमान यह है कि jQuery मोबाइल का सीएसएस चौड़ाई और ऊंचाइयों को स्केल नहीं करता है, लेकिन मुझे इसके बारे में कुछ भी नहीं मिला है।

मेरे एचटीएमएल यह है:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 

और फिर मैं इस जावास्क्रिप्ट निष्पादित करें:

if ($.mobile.media("screen and (min-width: 320px)")) { 
    if ($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) { 
     $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5'); 
    } 
} 

मैं क्या याद आ रही है?

Answer 1

मुझे लगता है कि आप सही अनुमान लगा रहे हैं।

JQM.css फ़ाइल को देखें।

इसमें केवल हाय-रेज/लो-रेज आइकन के लिए मीडिया प्रश्न शामिल हैं। बाकी सब कुछ रेटिना और गैर-रेटिना उपकरणों पर "जैसा है" है, इसलिए जेक्यूएम केवल आइकन आकार के मामले में रेटिना का समर्थन करता है।

initial-scale=.5, maximum-scale=.5, minimum-scale=.5 निर्दिष्ट करके आप 50% पर सब कुछ लॉक कर रहे हैं। तो आपका गैर-स्केलेबल आधा पृष्ठ है।

रेटिना ("हाई-एंड") उपकरणों के लिए जितना अधिक आप मानक ब्राउज़रों (विशेष रूप से "कम अंत", आईई 7 की तरह) के साथ अधिक परेशानी करेंगे। उदाहरण के लिए आईई 7 में जेक्यूएम आइकॉनप्रेट पोजिशनिंग की जांच करें - यदि मीडिया प्रतिक्रियाओं का समर्थन करने के लिए respond.js जैसी स्क्रिप्ट शामिल नहीं है, तो आइकन ऑफ-पोस्टियन होंगे।

मुझे लगता है कि वर्तमान में केवल जेक्यूएम को क्रॉस-ब्राउज़र रेटिना और गैर-रेटिना समाधान प्रदान करने के लिए पर्याप्त रेटिना डिवाइस नहीं हैं।

मुझे कुछ अच्छी जानकारी मिली here। मैंने एक सीएसएस-केवल iOS tab-bar भी किया, जो आईई 7 पर काम करता है।

मेरी प्लगइन में आवश्यक सीएसएस की जांच करें ताकि आइकन और ढाल पृष्ठभूमि सभी ब्राउज़रों पर अच्छा लगे और IE7 + 8 के लिए आवश्यक अतिरिक्त सीएसएस की मात्रा दिखाई दे। एक रेटिना/गैर-रेटिना JQM.css फ़ाइल को अच्छा लगेगा लेकिन डाउनलोड करना मुश्किल होगा :-)

Answer 2

आपके मामले में आपको केवल छवियों को लक्षित करना है, न कि संपूर्ण व्यूपोर्ट। छवियों को आपके सामान्य प्रदर्शन की तुलना में आधा आकार नीचे होना चाहिए।