2013-01-10 13 views
17

私は最近、何かに遭遇しましたが、私に何か不足しているかどうかわかりませんが、なぜこれが起こっているのか理解できません。

私は次のjQueryを持つサイトを持っているが、それ上で実行されているスニペット:

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

私はAndroidの携帯電話のブラウザでサイトにアクセスし、簡単にスクロールアップし、サイトダウン、私が見ることができるとき警戒。

Androidブラウザのスクロールバー(フェードインとフェードアウト)はサイト全体の上にオーバーレイされているため、ウィンドウのサイズ変更を引き起こすようには見えないため、このイベントが発生していないと推測しています。

誰かがAndroidブラウザがこのイベントをスクロールしている理由を知っていますか?

すべての情報をお待ちしております。

EDIT:

私はそれが実行可能な解決策だったが、イベントはまだAndroid上でのスクロールに解雇されているかどうかを確認するためにスクロールするオーバーフロー-Yを設定、ボディのためのCSSを設定しようとしています。

EDIT#2:私は私のHTMLに以下のメタタグを使用しています

:ウィンドウのサイズが実際に行うために、変更された場合は

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

私は、iosで同様の奇妙な問題が発生しています(http://stackoverflow.com/questions/14157942/orientationchange-event-fires-scroll-resize-eventを参照)。空白のhtml(ビューポートメタを含む)とサイズ変更アラートだけを試しましたか?まだそれは発射ですか? –

+0

@c_kickこれは、空のHTMLテストページで発生することが確認できます。私は自分のサイトの振る舞いを変更することでこれを回避することができましたが、なぜこれを行うのかに関する情報はオンラインでは見つかりません – Dan

+3

'$(window).scroll'イベントにバインドしようとしています。スクロールが行われている間に '$(window).resize(function(e){e.stopPropagation();}'を設定していますが、これは迷惑で、回避策を必要としないことに暖かく同意します。 –

答えて

5
私は同じ問題を抱えていた

、私の解決策を確認することでしたそれは私のアプリのどこかに過去のウィンドウの幅を格納する必要があった。私は

1
垂直スクロールにウィンドウの高さの変更を行うサイトを下にスクロールするとき、私のAndroidのブラウザはアドレステキストボックスを非表示にして示しているので、私は窓の高さにはカウントされませんでした

$(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)    
}) 

:コードは次のようなものかもしれません

私も同じ問題を抱えています!
URLバーが表示されて表示されると、Androidのブラウザの高さが変わるため、この問題は真です。したがって、ブラウザのリロードは、幅のサイズが変更された場合にのみ行わなければなりません。

私はこれを見ましたquestion in 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); 
     }; 
1

コメントで正しいです。ブラウザのインターフェースが消えていることが原因で、高さが変更され、サイズ変更イベントが発生します。したがって、の幅がに変更されているかどうかをチェックしたいレスポンシブなデザインを行っている場合は、特に関数の幅の変更を確認してください。

$(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/John Hann "smartresize" methodとよく似ています。

関連する問題