24

異常な問題が発生しており、提案を探しています。基本的に、私は使用しています：

  • JQuery Mobile 1.1
  • JQuery 8.2
  • PhoneGap（Cordova）2.1

iPhoneのアプリの多くのページで、カーソルを入力ボックスに置くと、仮想キーボードが開きます。それは問題なく、期待されています。

問題は次のとおりです。場合によっては（すべてではありません）、カーソルを入力ボックスに置くと、window.resizeイベントが発生します。以下のコードでこれを確認しました：

    $(window).resize(function(e) {
        alert('The window resize occurred!  Width: ' + $(window).width() + " Height: " + $(window).height());
        debugger;
        return false;
    });

window.resizeイベントを解決した直後に、JQueryMobileはページのサイズを誤った高さに変更することを決定します。何が何であるかを確認するために各要素に異なる色の境界線を追加したので、それがページであることがわかります。また、多くの場合、このサイズ変更アクションにより、GUIの半分がdivの下にオーバーフローし、カーソルがdivの下に隠れて表示されることもあります。

それを理解する最良の方法は、スクリーンショットを使用することです。

window.resize（）がページのサイズ変更をトリガーします

さて、私は誰もがこれに対する正確な答えを持っているとは本当に期待していません。デバッグのヒントを探しています。window.resize（）イベントに「debugger」ステートメントを追加し、コードをステップ実行しようとしました。ページのサイズを変更するように設計された他のサイズ変更リスナーにつながることを望んでいました。それが見つかった場合は、誰かがフォーム要素を選択したときに一時的にそれを無効にしてから、ぼかしや向きの変更時にサイズ変更を再度有効にすることができます。問題は、コードのすべての行をステップスルーすると、サイズ変更が発生する直前にデバッグプロセスが停止することです。

これは、window.resize以外に他のイベントが発生しているのではないかと思います。そこで、以下の2行を追加しました。

    document.addEventListener("throttledresize", function() { alert("throttledresize fired.") }, false);
    document.addEventListener("orientationchange", function() { alert("orientationchange fired.") }, false);

しかし、どちらも解雇されませんでした。だから私はやや立ち往生しています。問題が何であるかはわかっているとは思いますが、原因を突き止めることはできません。window.resize（）でページのサイズを変更するこの不思議なコードをどこで見つけることができるかについての提案はありますか？

4

5 に答える 5

10

頭がおかしくないのを見てうれしいです！かなり良いソリューションを実装したことを報告できてうれしいです。同じことをしたい場合の手順は次のとおりです。

1）jquery.mobile-1.xxjsに移動します

2）$ .mobile = $ .extend（）を見つけて、次の属性を追加します。

last_width: null,
last_height: null,

3）getScreenHeightを次のように変更します。

getScreenHeight: function() {
    // Native innerHeight returns more accurate value for this across platforms,
    // jQuery version is here as a normalized fallback for platforms like Symbian

    if (this.last_width == null || this.last_height == null || this.last_width != $( window ).width())
    {
        this.last_height = window.innerHeight || $( window ).height();
        this.last_width = $(window).width();
    }
    return this.last_height;
}

基本的に、これにより、幅も変更されない限り、jQueryがページの高さを再計算できなくなります。（つまり、向きの変更）ソフトキーボードは高さにのみ影響するため、このメソッドは、変更された高さではなく、キャッシュされた値を返します。

$ .mobile.getScreenHeightメソッドを適切にオーバーライドする方法を尋ねるために、別の投稿を作成します。以下のコードを別のJSファイルに追加しようとしましたが、機能しませんでした。

delete $.mobile.getScreenHeight;
$.mobile.last_width = null;
$.mobile.last_height = null;
$.mobile.getScreenHeight = function() 
{
   ... the code listed above
}

ほとんどの場合起動しましたが、元の機能も起動しました。ちょっと変だ。$ .mobileを適切に拡張する方法に関する別のトピックをここに投稿しました：$。mobileでJQueryMobileメソッドをオーバーライドする適切な方法

于 2012-10-16T01:47:47.883 に答える
3

私はこれを試して同様の問題を抱えていました：

  $('#main-browse').bind("orientationchange", function(event) {
    //Put the page dimensions for example with minimum height property

  }
于 2012-10-15T07:12:30.787 に答える
2

JQuery Mobile 1.4を使用しているCordova（3.x）でも同じ問題が発生していたため、ライブラリの作成者がこれに対処する可能性は低いです。私は多くの異なる解決策を試しましたが、実際にそれを修正したものはありませんでした。最も近い候補は、ウィンドウオブジェクトとドキュメントオブジェクトのそれぞれの「throttleresize」イベントと「pageshow」イベントにバインドされた単純なハンドラーをバインドすることでした。

それでも、UIの「ロックダウン」感は失われ、キーボードが終了した後、ユーザーはUI全体を上にドラッグできました。確かにヘッダーとフッターは移動しませんでしたが、背景とメインコンテンツ領域がドラッグ可能になり、スクロールバーが表示されました。あなたがそのネイティブアプリの感触を試しているなら、まったく受け入れられません...

そこで、Chrome / SafariのFirebugを調べて、ボックスモデルに追加のピクセルが追加されている場所を見つけることにしました。奇妙なことに、高さがまったく変更されていないことに気付きました。私の場合は、アクティブなページのパディングでした。だから私は別のスタック投稿からのソリューションを適応させました：

function resetActivePageHeight() {
var aPage = $( "." + $.mobile.activePageClass ),
  aPagePadT = parseFloat( aPage.css( "padding-top" ) ),
  aPagePadB = parseFloat( aPage.css( "padding-bottom" ) ),
  aPageBorderT = parseFloat( aPage.css( "border-top-width" ) ),
  aPageBorderB = parseFloat( aPage.css( "border-bottom-width" ) );
aPage.css( "min-height", deviceInfo.height - aPagePadT - aPagePadB - aPageBorderT - aPageBorderB )
.css("top","0px").css("padding","0px");}

次に、それらをデバイスの準備ができたドキュメントおよびウィンドウイベントにバインドしました。

  $( document ).bind( "pageshow", resetActivePageHeight );
  $( window ).bind( "throttledresize", resetActivePageHeight );

繰り返しになりますが、私は信用を取りたいと思いますが、私は他の誰かの良い考えに追加の角度を見つけたと思います。

于 2014-02-21T20:11:01.180 に答える
1

androidmanifestファイルに移動し、アクティビティでこの値に変更または更新しますandroid：windowSoftInputMode = "adjustResize"

私はadjustPanがページを壊して、コントロールが非表示になるという事実を知っています。デフォルト（指定なし）で問題ない場合があり、ここには他のオプションがあります。サイズ変更しないと、kbが表示されていることをjqmに伝えないと思います

したがって、jqmは変更せずにそのままにしておくと、その役割を果たします。私は、cordova 2.2、jqm 1.2、およびjquery1.8.2を使用しています。

于 2013-02-01T14:56:22.533 に答える
0

仮想キーボードがビューポートを拡張し、その下のコンテンツ（外部パネル）を表示するという問題がありました。

ウィンドウの高さに基づいてcssの高さを設定することで解決しました。

$('#page').css('height', $(window).height());
于 2014-01-11T00:27:00.903 に答える