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

79

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?

KobeBryant
quelle
1
Es war ein Problem mit dem Größenänderungsereignis, aber da meine Elementhöhe auf 100% des Ansichtsfensters festgelegt war, wurde es beim Scrollen neu berechnet.
KobeBryant

Antworten:

48

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

AlbertoFdzM
quelle
3
Unabhängig davon, ob es sich um ein beabsichtigtes Verhalten handelt oder nicht, möchten wir nicht, dass die Größenänderungsfunktion ausgelöst wird. Was ist hier die Lösung, ohne den Weg eines langwierigen Codes zu beschreiten, den andere Antworten vorgeschlagen haben?
Studocwho
Ich habe meiner Antwort einen Link hinzugefügt, der weitere Informationen zum Umgang mit diesem Verhalten in Chrome für Handys enthält.
AlbertoFdzM
Am einfachsten ist es, Höhe und Breite zu vergleichen, nachdem der Listener Ihres Ansichtsfensters ausgelöst wurde. Wenn sich nur die Höhe geändert hat, wirkt sich eine native Browser-Symbolleiste höchstwahrscheinlich auf die Höhe des Ansichtsfensters aus. Wenn es einen Fall gibt, in dem ein Benutzer die Abmessungen des Ansichtsfensters nur nach Höhe beeinflusst, können Sie weiter gehen und Entfernung und Zeit analysieren, um festzustellen, ob Benutzereingaben oder Systemeingaben das Ansichtsfenster ändern.
MarsAndBack
72

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.

CWitty
quelle
5
Rettete meinen Tag! Ich muss nur nach der Breite
suchen
14
Das Problem wird dadurch verursacht, dass die Bildlaufleiste ausgeblendet oder angezeigt wird und sich die Höhe des Bildschirms ändert, wodurch das ausgelöst wird $(window).resize(). Ich habe eine Bearbeitung vorgeschlagen.
Sander Koedood
3
Ich wollte nur hinzufügen, dass wir auch bei iOS Safari ein ähnliches Verhalten beobachtet haben.
Kris Krause
4
da es die Höhe ist, die die if-Bedingung ändert, sollte nur nach einer Änderung der Breite gesucht werden. Außerdem wird die Bedingung erst ausgelöst, wenn sich Breite und Höhe geändert haben. Dies ist nicht immer der Fall, aber bei fast allen Bildschirmgrößenänderungen wird die Breite geändert. Ich empfehle daher, keinen Höhenanteil zu verwenden. if($(window).width() != width){ }
Imran Bughio
7
es sollte || sein anstelle von &&
Maysam Torabi
4

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

Andrisom
quelle
2
Ich denke, Sie sollten $ (Fenster) .height (), nicht $ (Dokument) .height () und width verwenden.
Tarek El-Mallah
1

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.

Anders Gardebring
quelle
1
Mein Vorschlag wäre, die Überprüfung der Höhe wegzulassen und nur die Breite zu überprüfen.
Bertie
Die akzeptierte Antwort gilt weiterhin; Es liegt an Ihnen, die Logik entsprechend Ihren Anforderungen fortzusetzen. Letztendlich haben Sie dies selbst entdeckt, und dies sollte nur ein Kommentar unter der akzeptierten Antwort sein.
MarsAndBack
1

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.

Alan Espinet
quelle
0

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

Braden
quelle
Falsch. Diese Frage bezieht sich auf das Ereignis zum Ändern der Größe, das in einem mobilen Browser unerwartet ausgelöst wird.
user2867288
5
Eigentlich ist das nicht unbedingt falsch. Die Verwendung von onOrientationChange ist eine legitime Problemumgehung, da auf einem mobilen Gerät am wahrscheinlichsten ein Ereignis ausgelöst wird, bei dem die Größe des Bildschirms geändert wird. Diese Antwort ist in Ordnung. Ich stimme nicht einfach dafür, weil es einen anderen Fall gibt, den dies nicht abfängt - und dann erscheinen / verschwinden Browser-Chromes, was zu Größenänderungsereignissen führt (was mein Problem am Geldautomaten ist). Andernfalls wäre dies eine gute Lösung.
Dudewad
Angenommen, Sie sollten Größenänderungsereignisse abfangen, um Elemente auf dem Bildschirm anzupassen. Sie öffnen Ihre Entwicklertools und alles funktioniert einwandfrei mit der Größenänderung von Fenstern. Sie können sogar nach oben und unten scrollen! Jetzt entscheiden Sie sich, die Seite auf einem Tablet zu öffnen, scrollen nach oben und unten und alles passt sich neu an, was Erdbeben auf Ihrem Bildschirm verursacht! Sie müssen jedoch immer noch Ereignisse zum Ändern der Fenstergröße auf Ihrem PC verarbeiten! Das ist also keine richtige Antwort!
Centurian
Ich habe window.resize verwendet, um die Orientierungsänderung zu verfolgen. Damit vor diesem Problem. Das ist eine großartige Idee.
AMNBandara
Die Antwort oder sogar die verknüpfte Antwort enthält keinen richtigen Beispielcode, und die externen Links sind tot. In jedem Fall befasst sich die OP-Frage mit dem einfachen Scrollen ohne Änderung der Ausrichtung, wobei ein Größenänderungsereignis unabhängig von der Ausrichtung ausgelöst wird. Das einfache Überprüfen auf Höhenänderungen ist die effizienteste universelle Aufgabe. onOrientationChangeist anderswo nützlich ..
MarsAndBack
0

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.

dbreaux
quelle