Android Browser Triggers jQuery $(window).resize() on scrolling

Question

I have recently come across something quite wierd, I'm not sure if it's maybe me just missing something but I can't understand why this is happening.

I have a site that has the following jQuery snippet running on it:

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

When I go to the site on an Android phone browser, and simply scroll up and down the site, I can see the alert.

The Android browsers scroll bars (which fade in and out) are overlayed ontop of the entire site and don't seem to cause any resizing of the window, so I'm guessing this event isn't being fired by them.

Does anyone know why the Android browser is firing this event on scrolling?

Any information will be greatly appreciated.

EDIT:

I have tried setting CSS for body, setting overflow-y to scroll to see if that was a viable solution but the event is still being fired on scrolling on Android.

EDIT #2:

I am using the following metatag in my HTML:

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

Answer 1

I was having the same problem, my solution was to check if the window size actually changed, for doing it I needed to store the past window width somewhere in my app. The code could be something like this:

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

I did not count on the window height because my Android browser hides and shows the address textbox when I scroll down the site making the window height change on vertical scroll

Answer 2

@john-mccollum is correct in the comments. It appears to be the disappearing browser interface causing a change in height that triggers the resize event. So check for change in width specifically in your function if you are doing responsive design stuff where you want to check if the width has been resized.

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

Not required to make this work, but this pairs well with the Paul Irish / John Hann "smartresize" method.