mobile chrome fires resize event on scroll

Browsers in mobile devices often hide their horizontal top navigation bar when someone scrolls down, and show it again when scrolling up. This behavior affects the size of the client, firing the resize event. You just need to control not executing your code because of height changes or, at least, because of that height change.


I don't know is it still interesting, but My solution is : )

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
    }
}	

Just for curiosity, I was trying to reproduce it and if I'm correct this is caused by the navigation chrome bar.

When you scroll down and chrome hides the browser navigation bar it produces a window resize, but this is correct, because after that we have a bigger window size due to the free space that the browser nav bar has left.

Related article: https://developers.google.com/web/updates/2016/12/url-bar-resizing

Consider CWitty answer to avoid this behavior.


That sounds strange, but I have seen it in other browsers. You can work around this like so.

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

then in your resize event handler you can do.

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

I don't know the scope of your functions and all that, but you should get the gist from this.