लैंडस्केप से पोर्ट्रेट

Question

पर घूमने पर फोनगैप/एचटीएमएल 5 और एंड्रॉइड स्क्रीन का आकार बदलना समस्या अब उपयोगकर्ता एंड्रॉइड फोनगैप एप्लिकेशन के साथ एक अजीब समस्या का सामना कर रहा है जब उपयोगकर्ता लैंडस्केप से पोर्ट्रेट तक घूमता है, लेकिन दूसरी तरफ नहीं।

जब स्क्रीन लैंडस्केप से पोर्टेट तक घूमती है, तो सामग्री व्यूपोर्ट की ऊंचाई पिछली ऊंचाई पर बनी रहती है - हालांकि व्यूपोर्ट की चौड़ाई सही ढंग से बदलती है। निम्नलिखित चित्र दिखाने की कोशिश इस एक छोटे से स्पष्ट:

को घुमाता मैं इस सवाल को देखा: Android Screen Orientation: Landscape Back to Portrait ... लेकिन, जबकि स्वीकार किए जाते हैं जवाब हो सकता है सच है, मैं नहीं पूरी तरह से यकीन है कि क्या कर रहा हूँ वहां के लिए पूछा जा रहा है।

मैं केवल एक लेआउट/main.xml डिफ़ॉल्ट कॉन्फ़िगरेशन वहन करती है:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    > 
<TextView 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello" 
    /> 
</LinearLayout> 

मैं भी कुछ उन्मुखीकरण का पता लगाने पटकथा में डाल देखने के लिए कि अगर मदद करता है की कोशिश की है - मैं कोशिश की है:

var viewPortHeight = $(window).height(); 
alert (viewPortHeight+" x "+$(window).width()); 
var headerHeight = $('div[data-role="header"]').height(); 
var footerHeight = 0; 
var contentHeight = viewPortHeight - headerHeight - footerHeight; 

// Set all pages with class="page-content" to be at least contentHeight 
$('div[class="page-content"]').css({'min-height': contentHeight + 'px'}); 

और भी

   var devInfo = new DeviceInformation(); 
      devInfo.setOrientation(0); 
      time_column_count = Math.floor(viewport.height/270); 
      devInfo.setResolution({ 
       height : $(window).width(), 
       width : $(window).height() 
      }); 

लेकिन - कोई पासा। यहां कोई विचार है?

अद्यतन

यह केवल आईसीएस उपकरणों पर एक समस्या लगती है - और वहाँ वास्तव में उपकरणों है कि इस समस्या का सामना कर रहे हैं पर लैंडस्केप मोड में एक स्क्रॉल समस्या है। विभिन्न divs पर स्क्रॉलिंग सक्षम करने के लिए जेक्यूएम स्क्रॉल का उपयोग किया जा रहा है।

Answer 1

मुझे थोड़ी देर पहले फोनगैप के साथ एक ही समस्या थी। नीचे दिए गए कोड को उम्मीद है कि आप इस मुद्दे को हल करने में मदद करेंगे।

1 - सुनिश्चित करें कि phonegap.js फ़ाइल

2 html फ़ाइल के सिर के भीतर बुलाया जा रहा है - html पृष्ठ

<meta name="viewport" content="width=device-width, initial-scale=1"> 

3 के सिर के भीतर निम्नलिखित मेटा टैग जोड़ें - onDeviceReady में एक घटना श्रोता जोड़े()

<script type="text/javascript"> 
function onDeviceReady() 
{ 
    document.addEventListener("orientationChanged", updateOrientation); 
} 
</script> 

4 - आप differnet झुकाव, संभवतः विभिन्न छवियों में विशिष्ट परिवर्तन जोड़ना चाहते हैं, तो एक समान स्विच राज्य का उपयोग जाहिर

function updateOrientation() 
{ 
    var e = window.orientation; 
    switch(e) 
    { 
     case 0: 
      // PORTRAIT 
     break; 

     case -90: 
      // LANDSCAPE 
     break; 

     case 90: 
      // LANDSCAPE 
     break; 

     default: 
      //PORTRAIT 
     break; 
    }   
} 

5 - अगर नहीं तो कुछ ऐसे दृष्टिकोण आप अपना सकते हैं, अपने समापन के बाद निम्नलिखित शैली जोड़ें जावास्क्रिप्ट टैग

<style> 
    [data-role=page]{height: 100% !important; position:relative !important; top:0 !important;} 
</style> 

ऊपर से प्रयास करें और मुझे पता है कि यह काम करते हैं।

धन्यवाद, एल & एल भागीदारों

Answer 2

मैं व्यूपोर्ट मेटाटैग का उपयोग करने पर पहले टिप्पणी के साथ सहमत होगा।हालांकि मैं जोड़ूंगा कि आपको अपने लेआउट के लिए अपनी इच्छित पिक्सेल घनत्व भी निर्दिष्ट करनी चाहिए।

मोबाइल डिवाइस पर पोर्टेट बनाम लांसस्केप डालने में मुझे एक चीज़ मिलती है जो सीएसएस मीडिया प्रश्नों का उपयोग कर रही है। ये आपको जावास्क्रिप्ट पर भरोसा किए बिना लैंडस्केप और पोर्ट्रेट मोड में स्क्रीन तत्वों की सीएसएस स्टाइल बदलने की अनुमति देगा।
यह स्मार्टफोन बनाम टैबलेट के लिए चीज डालने में भी बेहतर नियंत्रण की अनुमति देता है।

Answer 3

जाओ फ़ाइल प्रकट करने के लिए:

गतिविधि के अंदर जोड़ने के नीचे का श्रेय:

android:theme="@android:style/Theme.Translucent" 

Answer 4

मैं एक ही समस्या थी लेकिन में कॉर्डोबा निर्माण के साथ इंटेल XDK एप्लिकेशन ढांचे के साथ सभी समस्या को हल करने। मैंने एक नई परियोजना करने के लिए किया था, मेरे पिछले एक चीज की प्रतिलिपि बनाएँ और इसमें कॉर्डोवा का पुनर्निर्माण करें। इस बार Altough, मैंने प्लगइन को इंटरफ़ेस को नहीं जोड़ा लेकिन केवल मेरी पिछली प्रोजेक्ट में कॉन्फ़िगरेशन फ़ाइलों की प्रतिलिपि बनाई। आश्चर्यजनक रूप से पर्याप्त काम किया और अब व्यूपोर्ट बस ठीक समायोजित करता है। तो मेरा अनुमान है कि शायद यह संस्करण के साथ एक समस्या है या कॉन्फ़िगरेशन में कुछ गलत है।

आशा है कि किसी भी तरह से मदद मिलेगी।

पी.एस गरीब अंग्रेज़ी

अद्यतन के लिए खेद है यह समस्या बनी रही जब मैं आवेदन का निर्माण किया है लग रहा था। समस्या को हल करने के लिए (अब के लिए यह एकमात्र समाधान लगता है) ऐसा करना है।

window.addEventListener('orientationchange', doOnOrientationChange); 
function doOnOrientationChange() 
    { 
    switch(window.orientation) 
    { 
     case -90: 
     case 90: 
       setTimeout(function(){ 
       var ScreenHeight = screen.height; 
       document.body.style.height = '100%'; 
       window.innerHeight = ScreenHeight - (FOOTER HEADER);},100); 
     break; 
     default: 
      var ScreenHeight = screen.height; 
      document.body.style.height = "100%"; 
      window.innerHeight = ScreenHeight - (FOOTER HEADER); 
     break; 
    } 
    } 

यह समय (कभी कभी यह ठीक से समायोजित नहीं होता लेकिन यह अक्सर नहीं होता है) के 99% काम करता है और वहाँ कुछ फ्रेम के लिए इंटरफ़ेस में laging का एक सा है। यदि आपको आश्चर्य है कि परिदृश्य में समय क्यों है क्योंकि किसी कारण से, यह कुछ .... द्वारा ओवरराइड हो जाता है। मुझे नहीं पता कि कॉर्डोवा ऐसा क्यों करता है, लेकिन समय के लिए, यह एकमात्र तरीका है जिसे मैंने इस बग को हल करने के लिए पाया। रूट दृश्य में layout_weight = "1":

आशा है कि यह मदद करता है :-D