web-dev-qa-db-ja.com

仮想キーボードによるwindow.resizeがjquery mobileで問題を引き起こす

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

  • JQuery Mobile 1.1
  • JQuery 8.2
  • PhoneGap（コルドバ）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() triggering page resize

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

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

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

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

jquerycordovajquery-mobileevent-handling
24
Anthony

私が狂っていないのを見てうれしい！私はかなり良い解決策を実装したと報告してうれしいです。同じようにする場合の手順は次のとおりです。

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

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でJQuery Mobileメソッドをオーバーライドする適切な方法

10
Anthony

私はこれを試して同様の問題がありました：

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

  }
3
mram888

私は、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 );

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

2
Robert Sherman

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

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

だからあなたの変更なしでjqmをそのままにしておいてください、それはそれでその仕事をします、私はcordova 2.2、jqm 1.2、jquery 1.8.2を使用しています

1
Radoslaw Dziegielewski

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

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

$('#page').css('height', $(window).height());
0
Joe's Ideas