Problemy z skalowaniem ekranu w systemie Phonegap/HTML5 i Androidem podczas obracania z poziomu krajobrazu do portretu

Question

Mam dziwny problem z aplikacją Android na klawiaturze w chwili, gdy użytkownik obraca się od pionu do portretu, ale nie na odwrót.

Po obróceniu ekranu z pionowego na portait wysokość rzutni treści wydaje się pozostawać na poprzedniej wysokości - jednak szerokość okna roboczego zmienia się poprawnie. Poniższe zdjęcia pokazują to spróbuj trochę jaśniej:

obraca się

Widziałem to pytanie: Android Screen Orientation: Landscape Back to Portrait ... ale gdy przyjął odpowiedź może prawda, nie jestem do końca pewien, co jest o to poproszony.

mam tylko Układ/main.xml że nosi domyślną konfigurację:

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

Próbowałem również wprowadzenie w niektórych skryptów wykrywania orientacji, aby zobaczyć czy to pomaga - Próbowałem:

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'}); 

a także

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

ale - nie ma kości. Jakieś pomysły tutaj?

UPDATE

To tylko wydaje się być problemem na urządzeniach ICS - i to jest rzeczywiście problem, przewijanie w trybie poziomym na urządzeniach, w których występuje ten problem. Przewijanie JQM służy do przewijania różnych elementów div.

Answer 1

Miałem podobny problem z phonegap jakiś czas temu. Poniższy kod powinien pomóc rozwiązać ten problem.

1 - Upewnij się, że plik phonegap.js jest nazywany w głowicy pliku html

2 - dodaj następujący tag meta w nagłówku strony html

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

3 - Dodaj detektora zdarzeń w onDeviceReady()

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

4 - Jeżeli chcesz dodać konkretne zmiany differnet orientacjach, ewentualnie różnych obrazów, należy użyć podobnego stanu przełącznika ment

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

     case -90: 
      // LANDSCAPE 
     break; 

     case 90: 
      // LANDSCAPE 
     break; 

     default: 
      //PORTRAIT 
     break; 
    }   
} 

5 - Dodaj następujący styl po zamknięciu javascript tag

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

Spróbuj wyżej i dać mi znać, jeśli to działa, jeśli nie istnieje kilka innych podejść można podjąć.

Dzięki L & L Partnerzy

Answer 2

Zgadzam się z wcześniejszym komentarzem na temat korzystania rzutni metatagu.Chociaż chciałbym dodać, że powinieneś również określić gęstość pikseli dla swojego układu.

Jedna rzecz, którą odkryłem jako nieocenioną przy układaniu portait w porównaniu do krajobrazu na urządzeniach mobilnych, to korzystanie z zapytań o media CSS. Pozwoli to zmienić styl CSS elementów ekranu w trybach poziomym i pionowym bez konieczności polegania w ogóle na javascript.
Pozwala to również na lepszą kontrolę nad układaniem smartfona i tabletu.

Answer 3

Przejdź do pliku manifestu:

wewnątrz aktywności dodać poniżej atrybuty:

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

Answer 4

miałem ten sam problem, ale z Intel XDK app ramy z Cordova kompilacji w Aby rozwiązać ten problem wszystkich. zrobiłem nowy projekt, skopiowałem wszystko, co miałem w poprzednim i odbudowałem cordova w nim. Jednak tym razem nie dodałem wtyczek przez interfejs, ale skopiowałem jedynie pliki konfiguracyjne, które były w moim poprzednim projekcie. O dziwo, zadziałało i teraz ekrany dostosowują się do porządku. Zgaduję więc, że prawdopodobnie problem z wersją lub coś w konfiguracjach jest złe.

Nadzieję, która pomogła w pewien sposób.

P.S przepraszam za słaby angielski

UPDATE Wydawało problem utrzymywały kiedy stworzyliśmy aplikację. Aby rozwiązać problem (na razie wydaje się, że jest to jedyne rozwiązanie), należy to zrobić.

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; 
    } 
    } 

Działa 99% czasu (czasami nie wyregulować poprawnie, ale to nie zdarza się często), a tam jest trochę laging w interfejsie na kilka ramek. Jeśli zastanawiasz się, dlaczego w krajobrazie jest czas oczekiwania, z jakiegoś powodu zostaje on zastąpiony przez .... coś. Nie wiem, dlaczego cordova to robi, ale na razie jest to jedyny sposób, w jaki znalazłem rozwiązanie tego błędu.

Mam nadzieję, że pomoże: - D