Vấn đề đổi kích thước màn hình của Phonegap/HTML5 và Android xoay từ chế độ ngang sang chân dung

Question

Tôi đang gặp sự cố lạ với ứng dụng android phonegap ngay bây giờ khi người dùng xoay từ ngang sang dọc, nhưng không phải theo cách khác.

Khi xoay màn hình từ chế độ ngang sang cổng chờ, chiều cao của chế độ xem nội dung dường như vẫn ở độ cao trước đó - tuy nhiên chiều rộng của chế độ xem sẽ thay đổi kích thước chính xác. Những hình ảnh sau đây cố gắng hiển thị này một chút rõ ràng hơn:

quay để

tôi thấy câu hỏi này: Android Screen Orientation: Landscape Back to Portrait ... nhưng trong khi câu trả lời được chấp nhận có thể thành sự thật, tôi không hoàn toàn chắc chắn là những gì được yêu cầu ở đó.

Tôi chỉ có một bố cục/main.xml mang cấu hình mặc định:

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

Tôi cũng đã cố gắng đưa vào một số kịch bản phát hiện định hướng đến xem giúp - Tôi đã thử:

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

và cũng

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

nhưng - không có con xúc xắc. Có ý tưởng nào ở đây không?

CẬP NHẬT

này dường như chỉ là một vấn đề trên các thiết bị ICS - và có thực sự là một vấn đề di chuyển trong chế độ phong cảnh trên các thiết bị đó đang gặp vấn đề này. JQM Scroll đang được sử dụng để cho phép cuộn trên các div khác nhau.

Answer 1

Tôi gặp sự cố tương tự với phonegap trong khi quay lại. Mã dưới đây hy vọng sẽ giúp bạn giải quyết vấn đề này.

1 - Hãy chắc chắn rằng các tập tin phonegap.js đang được gọi là trong đầu của tập tin html

2 - Thêm thẻ meta sau trong đầu của trang html

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

3 - Thêm một người biết lắng nghe sự kiện trong onDeviceReady()

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

4 - Nếu bạn muốn thêm những thay đổi cụ thể để định hướng differnet, có thể là hình ảnh khác nhau, sử dụng một nhà nước chuyển đổi tương tự 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 - Thêm phong cách sau đây sau khi bế mạc của bạn javascript thẻ

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

Vui lòng thử trên và cho tôi biết nếu nó hoạt động, nếu không có một vài phương pháp khác mà bạn có thể thực hiện.

Cảm ơn, L & L Partners

Answer 2

tôi sẽ đồng ý với những nhận xét trước đây về sử dụng viewport metatag.Mặc dù tôi sẽ thêm rằng bạn cũng nên chỉ định mật độ pixel dự kiến ​​cho bố cục của mình.

Một điều tôi đã nhận thấy là vô giá khi đặt portait và lanscape trên thiết bị di động đang sử dụng truy vấn phương tiện CSS. Chúng sẽ cho phép bạn thay đổi kiểu dáng CSS của các phần tử màn hình ở chế độ ngang và dọc mà không phải dựa vào javascript chút nào.
Điều này cũng cho phép kiểm soát tốt hơn trong việc đặt ra điều cho điện thoại thông minh so với máy tính bảng là tốt.

Answer 3

Đến biểu hiện file:

bên trong hoạt động thêm bên dưới thuộc tính:

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

Answer 4

tôi đã cùng một vấn đề nhưng với Intel khuôn khổ ứng dụng XDK với xây dựng cordova trong Để giải quyết vấn đề cả. tôi đã làm một dự án mới, sao chép mọi thứ tôi đã có trong dự án trước và xây dựng lại cordova trong đó. Khoảng thời gian này, tôi đã không thêm các plugin trough giao diện nhưng chỉ sao chép các tập tin cấu hình đã được trong dự án trước đây của tôi. Kỳ lạ là nó đã làm việc và bây giờ khung nhìn điều chỉnh tốt. Vì vậy, tôi đoán là nó có thể là một vấn đề với phiên bản hoặc một cái gì đó trong configs là sai.

Hy vọng điều đó đã giúp ích được.

Tái bút: xin lỗi cho người nghèo tiếng anh

CẬP NHẬT Dường như vấn đề vẫn kiên trì khi tôi đã xây dựng ứng dụng. Để giải quyết vấn đề (bây giờ vì nó có vẻ là giải pháp duy nhất) là để làm điều này.

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

Nó hoạt động 99% thời gian (đôi khi nó không điều chỉnh đúng nhưng nó không xảy ra thường xuyên) và có một chút laging trong giao diện cho một vài khung. Nếu bạn tự hỏi tại sao có thời gian chờ trong cảnh quan của nó bởi vì đối với một số lý do, nó được ghi đè bởi .... một cái gì đó. Tôi không biết tại sao cordova lại làm điều này nhưng, trong thời gian này, đó là cách duy nhất tôi tìm thấy để giải quyết lỗi này.

Hy vọng nó giúp :-D