mobile chrome fires resize event on scroll

问题:

I'm using the chrome mobile browser on galaxy s4, android 4.2.2 and for some reason every time I scroll the page down, it fires a resize event verified by the scaling of images from a jquery.cycle2 slideshow.

Any idea why this might be happening?

回答1:

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 leave.

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

Regards!

回答2:

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 jist from this.

回答3:

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

回答4:

The question has already been answered, but since this question do not bring up the question of responsive sites I would like to add some information on that.

I encountered this issue in Chrome on android when developing a responsive web site. When resizing the window I want to hide the menus (due to some design elements needing proper positioning) but the Chrome for android behaviour to trigger a resize event on scroll made that somewhat difficult..

Switching to start using onOrientationChange was not an option since this is a responsive site, there is no orientation change on a desktop PC, but I still needed the code to work on both regular PC:s, tablets and smartphones.

I could had started to do browser sniffing and such but I have so far been able to avoid that..

I tried to implement the solution suggested by CWitty but since scrolling up or down in fact triggers a height-change that did not work either.

I ended up adding a condition that only hides the menu when the width is changed, not when the height has changed. This works in my case since I only need to rewrite the menu when the width is changed.

回答5:

This is a duplicate of Javascript resize event on scroll mobile

In order to fix it, use onOrientationChange and window.orientation property. See the related answer: here

回答6:

Turns out there are many things which can fire resize in various mobile browsers.

I know it's not ideal to link to an external resource, but QuirksMode has a readable table that I don't want to duplicate (or maintain) here: http://www.quirksmode.org/dom/events/resize_mobile.html

Just to give an example, the one that was getting us: apparently in many browsers, opening the soft keyboard fires the event.

回答7:

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.