13

現在、ユーザーが横向きから縦向きに回転しているときに Android phonegap アプリケーションで奇妙な問題が発生していますが、その逆ではありません。

画面を横向きから縦向きに回転すると、コンテンツ ビューポートの高さは以前の高さのままのように見えますが、ビューポートの幅は正しくサイズ変更されます。次の画像は、これをもう少し明確に示しています。

横向き...に回転します ...そして縦表示

私はこの質問を見ました：Androidの画面の向き：横向きから縦向きに戻る ...しかし、受け入れられた答えは真実かもしれませんが、そこで何が求められているのか完全にはわかりません。

デフォルトの構成を保持する layout/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()
            });

しかし - サイコロはありません。ここに何かアイデアはありますか？

アップデート

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

4

4 に答える 4

8

しばらく前に phonegap で同様の問題が発生しました。以下のコードは、この問題の解決に役立つはずです。

1 - phonegap.js ファイルが html ファイルの head 内で呼び出されていることを確認します。

2 - HTML ページの head 内に次のメタ タグを追加します。

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

3 - onDeviceReady() にイベント リスナーを追加します。

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

4 - 特定の変更を別の向き (場合によっては別の画像) に追加する場合は、同様の switch ステートメントを使用します。

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 パートナー

于 2012-07-11T10:05:28.937 に答える
1

マニフェスト ファイルに移動します。

アクティビティ内に以下の属性を追加します。

android:theme="@android:style/Theme.Translucent"
于 2012-12-19T12:10:29.817 に答える
0

ビューポート メタタグの使用に関する以前のコメントに同意します。ただし、レイアウトに意図したピクセル密度も指定する必要があることを付け加えておきます。

モバイル デバイスでポートレートとランドスケープをレイアウトする際に非常に重要であることがわかったのは、CSS メディア クエリを使用することです。これらを使用すると、javascript にまったく依存することなく、横向きおよび縦向きモードの画面要素の CSS スタイルを変更できます。
これにより、スマートフォンとタブレットのレイアウトもより適切に制御できます。

于 2012-07-17T14:05:42.940 に答える