19

最近、かなり奇妙なことに出くわしました。何かが足りないだけなのかどうかはわかりませんが、なぜこれが起こっているのか理解できません。

次のjQueryスニペットが実行されているサイトがあります。

$(window).resize(function(){
  alert("Resize fired!");
});

Android携帯ブラウザでサイトにアクセスし、サイトを上下にスクロールするだけで、アラートが表示されます。

Androidブラウザのスクロールバー（フェードインおよびフェードアウト）はサイト全体の上にオーバーレイされており、ウィンドウのサイズ変更を引き起こしていないようです。したがって、このイベントはそれらによって発生していないと思います。

Androidブラウザがスクロール時にこのイベントを発生させる理由を誰かが知っていますか？

どんな情報でも大歓迎です。

編集：

本体にCSSを設定し、overflow-yを設定してスクロールして、それが実行可能な解決策であるかどうかを確認しようとしましたが、Androidでのスクロール時にイベントが発生します。

編集＃2：

HTMLで次のメタタグを使用しています。

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

3 に答える 3

7

同じ問題が発生していました。解決策は、ウィンドウサイズが実際に変更されたかどうかを確認することでした。そのためには、過去のウィンドウ幅をアプリのどこかに保存する必要がありました。コードは次のようになります。

$(window).resize(function() {
  clearTimeout(app.resize.timer)
  app.resize.timer = setTimeout(function(){
     var window_changed = $(window).width() != app.size.window_width
     if(window_changed) console.log('Window size changed! resize site')
  }, 500)               
})

サイトを下にスクロールして垂直スクロールでウィンドウの高さを変更すると、Androidブラウザーがアドレスのテキストボックスを非表示にして表示するため、ウィンドウの高さを考慮しませんでした

于 2013-05-09T04:11:38.617 に答える
3

@john-mccollumはコメントで正しいです。サイズ変更イベントをトリガーする高さの変更を引き起こしているブラウザインターフェイスが消えているようです。したがって、幅のサイズが変更されているかどうかを確認したいレスポンシブデザインを行う場合は、特に関数で幅の変更を確認してください。

$(window).resize(function(){
    var w = $(window).width();
    if (typeof checkw == 'undefined') checkw = w;
    if (w!=checkw) {
        console.log("The width changed from "+checkw+" to "+w);

        // do your responsive magic!

        checkw = w;
    }
});

これを機能させるために必須ではありませんが、これはPaul Irish /JohnHannの「smartresize」メソッドとよく対になります。

于 2015-02-06T03:57:48.303 に答える
1

私も同じ問題を抱えています！
URLバーが非表示および表示されると、Androidのブラウザの高さが変わるため、この問題は当てはまります。したがって、幅のサイズが変更された場合にのみブラウザのリロードが発生するようにする必要があります。 Stackoverflow

で この質問を見て、これを行う方法を教えてください。そしてこれはjsfiddleです。

      var doit;
      function resizedw(appwidth){
          var window_changed = $(window).width() != appwidth;
          if ($(window).width() != appwidth){
            ("body").append("did it"+appwidth+" ");
          }
          past_width = $(window).width();
      }

      var past_width = $(window).width();
      window.onresize = function() {
        clearTimeout(doit);
        doit = setTimeout(function() {
            resizedw(past_width);
        }, 100);
      };
于 2014-06-19T02:46:32.003 に答える