2

responsiveポップアップの非表示など、Web サイトの特定の要素の動作を変更する関数があります。2 つのケースで呼び出します。

$(document).ready(responsive);
$(window).resize(responsive);

仮想キーボードが実際に画面の高さを変更し、responsive機能をトリガーしてポップアップを閉じるため、Android chromeで問題が発生します（一部のポップアップにはテキストフィールドがあり、入力できません）。

どうすればこれを防ぐことができますか? Android仮想キーボードは画面の幅ではなく高さのみを変更するという良い点をどこかで読んだので、サイズ変更の前後で幅を比較することをお勧めします。そのため、前後の幅を比較してresize()幅が異なる場合に実行するこの関数を作成しましたが、期待どおりに機能せず、画面の高さを変更しただけでもコンソール ログに異なるドキュメント幅が表示されます (chrome 開発者ツールを使用) ）。

何がうまくいかなかったのかresponsive、高さの変更時に関数が起動されないようにするにはどうすればよいですか?

function resizeWidth() {
    var existingWidth = $(document).width();

    $(window).resize(function() {
        var newWidth = $(document).width();
        if (existingWidth != newWidth) {
            $(window).resize(responsive);
            console.log(existingWidth);
            console.log(newWidth);
        };
    });
};

$(window).resize(resizeWidth);
4

1 に答える 1

2

まず、ハンドラーをresizeイベントに複数回アタッチしています。1 つは読み込み時に、次にサイズ変更が発生して呼び出されるたびresizeWidthにもう 1 つは呼び出されます。その関数内のハンドラーを削除する必要があります。responsive()また、幅が変更されたときに別のサイズ変更ハンドラーをアタッチするのではなく、関数を呼び出したいだけだと思います。

あなたが抱えている主な問題は、existingWidth複数のイベントで見られるように範囲が十分に低くないことです. グローバルにすることもできますが、それは一般的に悪い習慣と考えられています。data代わりに、次のように属性を使用できます。

function resizeWidth() {
    var existingWidth = $(document).data('resize-width');
    var newWidth = $(document).width();
    if (existingWidth != newWidth) {
         responsive();
         $(document).data('resize-width', newWidth);
    };
};

$(window).resize(resizeWidth);
于 2015-01-08T16:01:30.037 に答える