Mobile Chrome Brände ändern die Größe des Ereignisses beim Scrollen

Ich verwende den mobilen Chrome-Browser auf Galaxy S4, Android 4.2.2 und aus irgendeinem Grund wird jedes Mal, wenn ich die Seite nach unten scrolle, ein Größenänderungsereignis ausgelöst, das durch die Skalierung von Bildern aus einer Diashow von jquery.cycle2 überprüft wird.

Irgendeine Idee, warum dies passieren könnte?

Nur aus Neugier habe ich versucht, es zu reproduzieren, und wenn ich richtig bin, wird dies durch die Navigations-Chromleiste verursacht.

Wenn Sie nach unten scrollen und die Navigationsleiste des Browsers in Chrome ausblendet, wird die Fenstergröße geändert. Dies ist jedoch korrekt, da wir danach aufgrund des freien Speicherplatzes, den die Navigationsleiste des Browsers frei hat, eine größere Fenstergröße haben.

In Verbindung stehender Artikel: https://developers.google.com/web/updates/2016/12/url-bar-resizing

Das klingt seltsam, aber ich habe es in anderen Browsern gesehen. Sie können dies so umgehen.

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

Dann können Sie dies in Ihrem Event-Handler zur Größenänderung tun.

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

Ich kenne den Umfang Ihrer Funktionen und all das nicht, aber Sie sollten das Wesentliche daraus ziehen.

Ich weiß nicht, ob es noch interessant ist, aber meine Lösung lautet :)

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

Die Frage wurde bereits beantwortet, aber da diese Frage nicht die Frage nach reaktionsfähigen Websites aufwirft, möchte ich einige Informationen dazu hinzufügen.

Ich bin auf dieses Problem in Chrome unter Android gestoßen, als ich eine reaktionsfähige Website entwickelt habe. Beim Ändern der Fenstergröße möchte ich die Menüs ausblenden (aufgrund einiger Designelemente, die eine korrekte Positionierung benötigen), aber das Verhalten von Chrome für Android, um ein Größenänderungsereignis beim Scrollen auszulösen, machte dies etwas schwierig.

Der Wechsel zur Verwendung von onOrientationChange war keine Option, da es sich um eine reaktionsfähige Site handelt. Auf einem Desktop-PC gibt es keine Änderung der Ausrichtung. Der Code musste jedoch weiterhin auf normalen PCs, Tablets und Smartphones verwendet werden.

Ich hätte anfangen können, Browser zu schnüffeln und so, aber ich konnte das bisher vermeiden.

Ich habe versucht, die von CWitty vorgeschlagene Lösung zu implementieren, aber da das Scrollen nach oben oder unten tatsächlich eine Höhenänderung auslöst, die auch nicht funktioniert hat.

Am Ende habe ich eine Bedingung hinzugefügt, die das Menü nur verbirgt, wenn die Breite geändert wird, nicht, wenn sich die Höhe geändert hat. Dies funktioniert in meinem Fall, da ich das Menü nur neu schreiben muss, wenn die Breite geändert wird.

Browser auf Mobilgeräten verbergen häufig ihre horizontale obere Navigationsleiste, wenn jemand nach unten scrollt, und zeigen sie beim Scrollen nach oben erneut an. Dieses Verhalten wirkt sich auf die Größe des Clients aus und löst das Größenänderungsereignis aus. Sie müssen nur steuern, dass Ihr Code aufgrund von Höhenänderungen oder zumindest aufgrund dieser Höhenänderung nicht ausgeführt wird.

Dies ist ein Duplikat des Javascript-Größenänderungsereignisses auf Scroll Mobile

Verwenden Sie zum Beheben die Eigenschaften onOrientationChange und window.orientation. Siehe die entsprechende Antwort: hier

Es stellt sich heraus, dass es viele Dinge gibt, die resizein verschiedenen mobilen Browsern ausgelöst werden können.

Ich weiß, dass es nicht ideal ist, eine Verknüpfung zu einer externen Ressource herzustellen, aber QuirksMode verfügt über eine lesbare Tabelle, die ich hier nicht duplizieren (oder verwalten) möchte: http://www.quirksmode.org/dom/events/resize_mobile.html

Um nur ein Beispiel zu nennen, das uns gebracht hat: Anscheinend löst das Öffnen der Softtastatur in vielen Browsern das Ereignis aus.