Phonegap/HTML5とAndroidスクリーンのサイズ変更の問題が横から縦に変更されました

Question

ユーザーが風景から肖像画に回転していて、逆の方向に回転していないときに、Androidのphonegapアプリケーションで奇妙な問題が発生しました。

画面を風景からポートレートに回転させると、コンテンツビューポートの高さは前の高さのままですが、ビューポートの幅は正しく変更されます。以下の画像は、この小さな明確に示そう：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() 
      }); 

けど - いいえサイコロ。ここにどんなアイデア？

UPDATE

これが唯一のICSデバイス上の問題のようだ - と、この問題が発生しているデバイス上のランドスケープモードでのスクロール問題は、実際にそこにあります。 JQM Scrollは、異なるdivのスクロールを有効にするために使用されています。

Answer 1

私はphonegap aと同様の問題がありました。以下のコードはこの問題を解決するのに役立ちます。

1 - phonegap.jsファイルは、htmlファイルの先頭

2内で呼び出されていることを確認してください -

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

3 htmlページのヘッド内に次のメタタグを追加 -

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

4）（onDeviceReadyにイベントリスナーを追加します - あなたは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をメンター - 上記を試してみて、それが働けば、あなたが取ることができるいくつかの他の方法があるない場合、私は、教えてくださいJavaScriptのタグ

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

あなたのクロージング後に次のスタイルを追加します。

おかげで、 L & Lパートナーズ

Answer 2

私は、ビューポートのメタタグを使用しての以前のコメントに同意するだろう。レイアウトに目的のピクセル密度を指定する必要があります。

モバイル機器でのポートレートとlanscapeのレイアウトにおいて、私が大切にしていることは、CSSメディアクエリを使用していることです。これらは、javascriptにまったく頼ることなく、横および縦モードの画面要素のCSSスタイルを変更することを可能にします。
スマートフォン対タブレットのレイアウトにも優れています。ファイルマニフェストする

Answer 3

ゴー：アクティビティ内

は、以下の属性を追加：。

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

Answer 4

私は同じ問題を抱えていたが、中コルドバのビルドを搭載したIntel XDKアプリフレームワークと すべての問題を解決するには私は新しいプロジェクトを行い、前のプロジェクトのすべてをコピーし、コードワを再構築することでした。この間、私はプラグインのトラフをインターフェイスに追加しなかったが、以前のプロジェクトにあった設定ファイルだけをコピーした。不思議なことに、それはうまくいきました。そして今、ビューポートはうまく調整されます。だから私の推測は、おそらくバージョンやconfigsの何かに問題がある間違っている。

何らかの方法で役立つことを願っています。

P.Sは下手な英語

UPDATE のため申し訳ありません、私がアプリケーションを構築したときに問題が持続見えました。問題を解決するには（これは唯一の解決策であるように）これを行うことです。

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のビットがあります。景色に時間切れがある理由が不思議であれば何らかの理由でそれが上書きされてしまいます。私はなぜcordovaがこれをしているのかわかりませんが、当面はこのバグを解決するために私が見つけた唯一の方法です。

希望します.-D