it-swarm.com.de

mobile Chrome feuert die Größe des Ereignisses beim Scrollen ab

Ich verwende den Chrome Mobile Browser für Galaxy S4 und Android 4.2.2. Jedes Mal, wenn ich die Seite nach unten scrolle, wird ein Größenänderungsereignis ausgelöst, das durch Skalieren von Bildern aus einer Diashow von jquery.cycle2 bestätigt wird.

Irgendeine Idee, warum das passieren könnte?

63
KobeBryant

Nur aus Neugierde habe ich versucht, es zu reproduzieren, und wenn ich richtig liege, wird dies durch die Navigationsleiste verursacht.

Wenn Sie nach unten scrollen und Chrome die Browser-Navigationsleiste ausblenden, wird eine Fenstergröße angezeigt. Dies ist jedoch korrekt, da wir aufgrund des freien Speicherplatzes der Browser-Navigationsleiste eine größere Fenstergröße haben.

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

Grüße!

33
AlbertoFdzM

Das hört sich seltsam an, aber ich habe es in anderen Browsern gesehen. Sie können das so umgehen.

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

dann können Sie in Ihrem Event-Handler die Größe ändern.

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

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

63
CWitty

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

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

3
Andrisom

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

Dieses Problem ist in Chrome auf Android bei der Entwicklung einer responsiven Website aufgetreten. Bei der Größenänderung des Fensters möchte ich die Menüs ausblenden (weil einige Designelemente die richtige Positionierung erfordern), aber das Verhalten von Chrome für Android zum Auslösen eines Größenänderungsereignisses beim Scrollen machte das etwas schwierig.

Die Umstellung auf onOrientationChange war keine Option, da dies eine reaktionsschnelle Website ist. Es gibt keine Orientierungsänderung auf einem Desktop-PC, aber ich brauchte immer noch den Code, um auf normalen PCs, Tablets und Smartphones zu funktionieren.

Ich hätte mit dem Browser-Sniffing angefangen und so, aber das konnte ich 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 ebenfalls nicht funktioniert hat.

Am Ende fügte ich eine Bedingung hinzu, die das Menü nur verbirgt, wenn sich die Breite ändert, nicht wenn sich die Höhe geändert hat. Dies funktioniert in meinem Fall, da ich das Menü nur umschreiben muss, wenn die Breite geändert wird.

1

Es stellt sich heraus, dass es viele Dinge gibt, die resize in verschiedenen mobilen Browsern auslösen können. 

Ich weiß, dass es nicht ideal ist, auf eine externe Ressource zu verlinken, aber QuirksMode hat eine lesbare Tabelle, die ich hier nicht duplizieren (oder beibehalten) möchte: http://www.quirksmode.org/dom/events /resize_mobile.html

Um nur ein Beispiel zu nennen, das uns bescherte: Offenbar wird das Öffnen der Soft-Tastatur in vielen Browsern ausgelöst.

0
dbreaux

Browser in mobilen Geräten verbergen oft die horizontale obere Navigationsleiste, wenn ein Bildlauf nach unten ausgeführt wird, und zeigen sie beim erneuten Bildlauf erneut an. Dieses Verhalten wirkt sich auf die Größe des Clients aus, wodurch das Ereignis zur Größenänderung ausgelöst wird. Sie müssen lediglich kontrollieren, dass der Code aufgrund von Höhenänderungen oder zumindest aufgrund dieser Höhenänderung nicht ausgeführt wird.

0
Alan Espinet

Dies ist ein Duplikat von Javascript-Größenänderungsereignis auf scroll mobile

Um dies zu beheben, verwenden Sie die Eigenschaft onOrientationChange und window.orientation. Siehe die zugehörige Antwort: hier

0
Braden