web-dev-qa-db-fra.com

mobile chrome déclenche un événement de redimensionnement sur le défilement

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

Une idée pourquoi cela pourrait se produire?

androidjquerygoogle-chromescroll
63
KobeBryant

Juste par curiosité, j'essayais de le reproduire et, si je ne me trompe pas, cela est dû à la barre de navigation chromée.

Lorsque vous faites défiler l'écran vers le bas et que chrome masque la barre de navigation du navigateur, il provoque un redimensionnement de la fenêtre, mais cette modification est correcte car, après cela, la taille de la fenêtre est plus grande en raison de l'espace disponible laissé par la barre de navigation.

Artcile connexe: https://developers.google.com/web/updates/2016/12/url-bar-resizing

Cordialement!

33
AlbertoFdzM

Cela semble étrange, mais je l'ai vu dans d'autres navigateurs. Vous pouvez contourner cela comme ça.

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

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

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

Je ne connais pas l'étendue de vos fonctions et tout le reste, mais vous devriez en tirer le meilleur parti.

63
CWitty

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

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

On a déjà répondu à la question, mais comme cette question ne soulève pas la question des sites réactifs, j'aimerais ajouter quelques informations à ce sujet.

J'ai rencontré ce problème dans Chrome sous Android lors du développement d'un site Web réactif. Lors du redimensionnement de la fenêtre, je souhaite masquer les menus (certains éléments de conception nécessitant un positionnement correct), mais le comportement de Chrome pour Android pour déclencher un événement de redimensionnement lors du défilement rendait la tâche un peu difficile.

Commencer à utiliser onOrientationChange n’était pas une option, car il s’agissait d’un site réactif, il n’y avait aucun changement d’orientation sur un PC, mais j’avais toujours besoin que le code fonctionne sur les ordinateurs, les tablettes et les smartphones classiques.

Je pouvais avoir commencé à renifler le navigateur, mais j’ai pu jusqu’à présent éviter cela.

J'ai essayé d'implémenter la solution suggérée par CWitty, mais puisque le défilement vers le haut ou le bas provoque en fait un changement de hauteur qui ne fonctionne pas non plus.

J'ai fini par ajouter une condition qui ne masque le menu que lorsque la largeur est modifiée, pas lorsque la hauteur a été modifiée. Cela fonctionne dans mon cas car je n'ai besoin de réécrire le menu que lorsque la largeur est modifiée.

1
Anders Gardebring

Il s'avère que beaucoup de choses peuvent déclencher resize dans divers navigateurs mobiles. 

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

Juste pour donner un exemple, celui qui nous attirait: apparemment, dans de nombreux navigateurs, l’ouverture du clavier logiciel déclenche l’événement.

0
dbreaux

Les navigateurs des appareils mobiles cachent souvent la barre de navigation horizontale supérieure lorsque quelqu'un fait défiler l'écran et l'afficher à nouveau lors du défilement vers le haut. Ce comportement affecte la taille du client et déclenche l'événement de redimensionnement. Vous devez juste contrôler que votre code n’est pas exécuté à cause de changements de hauteur ou, au moins, à cause de ce changement de hauteur.

0
Alan Espinet

Ceci est une copie de Javascript resize event sur scroll mobile

Pour résoudre ce problème, utilisez onOrientationChange et la propriété window.orientation. Voir la réponse associée: ici

0
Braden