मैं Jquery मोबाइल और फोनगैप का उपयोग कर एक ऐप विकसित कर रहा हूं। मेरे पास यह मुद्दा है कि जब मैं एक पृष्ठ संक्रमण करता हूं, तो आने वाला पृष्ठ पहले गलत तरीके से प्रकट होता है (डीओएम तत्व सही स्थिति में नहीं और न ही सही आकार में), फिर एक बार संक्रमण पूरा हो जाने पर, तत्व आकार बदलते हैं और सही स्थिति में जाते हैं । (साथ ही, पेज ट्रांज़िशनिंग भी बाहर निकलने से पहले गलत तरीके से दिखाई देता है)। मैंने फीका और स्लाइड संक्रमण दोनों का उपयोग करके इसका परीक्षण किया है (मैं आखिरकार स्लाइड संक्रमण करना चाहता हूं)।पृष्ठ संक्रमण के दौरान Jquery मोबाइल पेज का आकार बदलना
यहाँ एक jsFiddle समस्या को दर्शाता हुआ है:
http://jsfiddle.net/fz7qs/2/
मैं भी एक पेज कंटेनर के रूप में एक div ताकि पूरे पृष्ठ एक बार में संक्रमण नहीं है, लेकिन सिर्फ पेज कंटेनर div उपयोग कर रहा हूँ।
मैं बहुत अधिक सब कुछ (ऊंचाई, चौड़ाई, मार्जिन इत्यादि) के लिए सीएसएस प्रतिशत का उपयोग कर रहा हूं ताकि ऐप विभिन्न डिवाइस आकारों पर स्केल करेगा। इसके अतिरिक्त, मैं कुछ तत्वों को केंद्रित करने के लिए जावास्क्रिप्ट का उपयोग कर रहा हूं (पेजशो इवेंट पर निकाल दिया गया)। मुझे लगता है कि ये प्रतिशत समस्या का हिस्सा हैं। मैंने डेस्कटॉप ब्राउज़र पर एक साधारण परीक्षण (फोनगैप निकालना) बनाया और पृष्ठ कंटेनर पर एक निश्चित ऊंचाई निर्धारित की। यह समस्या को ठीक करने लग रहा था, लेकिन जब मैंने अपने फोन पर कोशिश की, तो मुद्दा अभी भी वहां था।
ऐप में प्रत्येक पृष्ठ $ .mobile.loadPage() का उपयोग कर डीओएम में प्रीलोड किया गया है। मैंने सोचा कि अगर मैं उन्हें प्रीलोड करता हूं, तो प्रतिशत ऊंचाई माता-पिता (पृष्ठ कंटेनर div) के सापेक्ष होगी और संक्रमण सही दिखना चाहिए।
Jquery मोबाइल में आगे देखकर, मैंने पाया कि एक संक्रमण के दौरान, पृष्ठ की ऊंचाई खाली स्ट्रिंग पर सेट की गई थी। मैंने यह देखने के लिए सिर्फ यह जांचने की कोशिश की कि यह प्रतिशत ऊंचाई के साथ काम करेगा या नहीं। फिर, यह मेरे डेस्कटॉप परीक्षण पर काम किया, लेकिन फोन पर नहीं।
मैं परीक्षण करने के लिए सैमसंग गैलेक्सी नेक्सस पर एंड्रॉइड फोनगैप (एपीआई लेवल 8 - एंड्रॉइड 2.2) का उपयोग कर रहा हूं।
क्या प्रतिशत आधारित मूल्यों को रखते हुए पृष्ठ संक्रमण से पहले सीएसएस और जावास्क्रिप्ट पोजिशनिंग लागू करने का कोई तरीका है?
index.html
<body>
<!-- header on every page -->
<div id="mainHeader">This is a header</div>
<!-- page content -->
<div id="pageContainer">
<div data-role="page"></div>
</div>
</body>
page1.html
<body>
<div data-role="page" id="page1">
<div class="subheader">
<div class="backButton"></div>
<div class="subheaderText">Settings</div>
<div class="helpButton"></div>
</div>
</div>
</body>
प्रासंगिक सीएसएस
#pageContainer {
overflow: hidden;
width: 100%;
height: 86.772486772486772486772486772487%;
}
.ui-mobile [data-role="page"] {
min-height: 0px !important;
color: white;
position: relative;
width: 100%;
height: 100%;
background: #868a73;
}
.subheader {
width: 100%;
height: 10.16260162601626016260162601626%;
background-color: #000;
display: inline-block;
text-align: center;
position: relative;
}
.backButton {
background: url("images/back_button.png");
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
float: left;
width: 8.888888888888888888888888888889%;
height: 52%;
margin-left: 5.555555555555555555555555555556%;
}
.subheaderText {
color: #FFF;
font-size: 2.45em;
font-weight: bold;
display: inline-block;
}
.helpButton {
float: right;
background: url("images/help_button.png");
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 8.888888888888888888888888888889%;
height: 64%;
right: 5.555555555555555555555555555556%;
}