web-dev-qa-db-ja.com

mobile chromeスクロール時にサイズ変更イベントを起動します

私はchrome galaxy s4のモバイルブラウザ、Android 4.2.2を使用し、ページを下にスクロールするたびにサイズ変更を実行jquery.cycle2スライドショーからの画像のスケーリングによって検証されるイベント。

なぜこれが起こっているのでしょうか？

androidjquerygoogle-chromescroll
68
KobeBryant

好奇心のために、私はそれを再現しようとしましたが、正しい場合、これはナビゲーションchrome bar。

下にスクロールしてchromeブラウザーのナビゲーションバーを非表示にすると、ウィンドウのサイズ変更が行われますが、これは正しいです。があります。

関連記事： https://developers.google.com/web/updates/2016/12/url-bar-resizing

よろしく！

40
AlbertoFdzM

それは奇妙に聞こえますが、私は他のブラウザで見ました。このように回避できます。

var width = $(window).width(), height = $(window).height();

その後、サイズ変更イベントハンドラで実行できます。

if($(window).width() != width || $(window).height() != height){
  //Do something
}

私はあなたの関数のスコープなどを知りませんが、ここから要点を取得する必要があります。

65
CWitty

まだ面白いのかわかりませんが、私の解決策は:)

var document_width, document_height;

$(document).ready(function()
{
        document_width=$(document).width(); document_height=$(document).height();
    // Do something
}

$(window).resize(function()
{
    if(document_width!=$(document).width() || document_height!=$(document).height()) 
    {
        document_width=$(document).width(); document_height=$(document).height();
        // Do something
    }
}
3
Andrisom

質問はすでに回答されていますが、この質問ではレスポンシブサイトの質問が表示されないため、その情報を追加します。

この問題は、Chrome on AndroidレスポンシブWebサイトの開発時に発生します。ウィンドウのサイズを変更するときは、メニューを非表示にする必要があります。適切な配置）が、Chrome for Android=スクロールでサイズ変更イベントをトリガーする動作は、それをやや難しくしました。

これはレスポンシブサイトであり、デスクトップPCには向きの変更がないため、onOrientationChangeを使用するように切り替えることはオプションではありませんでしたが、通常のPC、タブレット、スマートフォンの両方で動作するコードが必要でした。

ブラウザーのスニッフィングなどを開始することもできましたが、これまでのところ回避できました。

私はCWittyによって提案された解決策を実装しようとしましたが、実際には上下にスクロールすると高さの変更がトリガーされ、それも機能しませんでした。

最終的に、高さが変わったときではなく、幅が変わったときにのみメニューを非表示にする条件を追加しました。幅が変更された場合にのみメニューを書き換える必要があるため、これは私の場合に機能します。

1
Anders Gardebring

モバイルデバイスのブラウザは、誰かが下にスクロールすると水平のトップナビゲーションバーを非表示にし、上にスクロールすると再び表示します。この動作はクライアントのサイズに影響を与え、サイズ変更イベントを発生させます。高さの変更のため、または少なくともその高さの変更のために、コードを実行しないように制御する必要があります。

1
Alan Espinet

さまざまなモバイルブラウザでresizeを起動できるものがたくさんあります。

外部リソースにリンクすることは理想的ではないことはわかっていますが、QuirksModeには、ここで複製（または保守）したくない読み取り可能なテーブルがあります。 http://www.quirksmode.org/dom/events/ resize_mobile.html

例を挙げると、私たちを惹きつけたものです。明らかに多くのブラウザで、ソフトキーボードを開くとイベントが発生します。

0
dbreaux

これは スクロールモバイルのJavascriptサイズ変更イベント の複製です

修正するには、onOrientationChangeおよびwindow.orientationプロパティを使用します。関連する回答を参照してください： here

0
Braden