chrome mobile déclenche l'événement de redimensionnement lors du défilement

Question

J'utilise le navigateur mobile chrome sur galaxy s4, Android 4.2.2 et pour une raison quelconque, chaque fois que je fais défiler la page vers le bas, il déclenche un événement de redimensionnement vérifié par la mise à l'échelle des images d'un diaporama jquery.cycle2.

Une idée de la raison pour laquelle cela pourrait se produire ?

Answer 1

Cela semble étrange, mais je l'ai vu dans d'autres navigateurs. Vous pouvez contourner ce problème de la manière suivante.

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

puis dans votre gestionnaire d'événement de redimensionnement vous pouvez faire.

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

Je ne connais pas l'étendue de vos fonctions et tout cela, mais vous devriez en tirer l'essentiel.

Answer 2

Je ne sais pas si c'est toujours intéressant, mais ma solution l'est : )

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

Answer 3

Les navigateurs des appareils mobiles masquent souvent leur barre de navigation horizontale supérieure lorsque quelqu'un fait défiler la page vers le bas, et la font réapparaître lorsqu'il fait défiler la page vers le haut. Ce comportement affecte la taille du client, déclenchant l'événement resize. Vous devez simplement contrôler le fait de ne pas exécuter votre code à cause des changements de hauteur ou, du moins, à cause de ce changement de hauteur.

Answer 4

La question a déjà reçu une réponse, mais comme cette question ne soulève pas la question des sites réactifs, je voudrais ajouter quelques informations à ce sujet.

J'ai rencontré ce problème dans Chrome sur Android lors du développement d'un site web réactif. Lorsque je redimensionne la fenêtre, je veux masquer les menus (en raison de certains éléments de conception nécessitant un positionnement correct), mais le comportement de Chrome pour Android, qui consiste à déclencher un événement de redimensionnement lors du défilement, rend la tâche quelque peu difficile

L'utilisation de onOrientationChange n'était pas une option, car il s'agit d'un site réactif, il n'y a pas de changement d'orientation sur un PC de bureau, mais j'avais toujours besoin que le code fonctionne à la fois sur les PC ordinaires, les tablettes et les smartphones.

J'aurais pu commencer à faire du "browser sniffing" et autres, mais j'ai réussi jusqu'à présent à éviter cela

J'ai essayé de mettre en œuvre la solution proposée par CWitty, mais comme le défilement vers le haut ou vers le bas déclenche en fait un changement de hauteur, cela n'a pas fonctionné non plus.

J'ai fini par ajouter une condition qui ne masque le menu que lorsque la largeur est modifiée, et non lorsque la hauteur est modifiée. Cela fonctionne dans mon cas puisque je ne dois réécrire le menu que lorsque la largeur est modifiée.

Answer 5

Il s'avère qu'il y a beaucoup de choses qui peuvent enflammer resize dans divers navigateurs mobiles.

Je sais que ce n'est pas idéal de faire un lien vers une ressource externe, mais QuirksMode a un tableau lisible que je ne veux pas dupliquer (ou maintenir) ici : http://www.quirksmode.org/dom/events/resize_mobile.html

Pour donner un exemple, celui qui nous gênait : apparemment, dans de nombreux navigateurs, l'ouverture du clavier programmable déclenche l'événement.