Comment simuler pinch zoom dans Google Chrome?
je développe une fonction pinch zoom pour une application mobile écrite en javascript et je veux le tester dans Google Chrome avec la fonction d'émulation de l'appareil mobile. Mais je ne peux pas trouver un moyen de tester un geste de pincement.
j'ai essayé tout ce que j'ai pu trouver sur internet (appuyer sur Maj et déplacer la souris, appuyer sur Alt et déplacer la souris), mais rien de tout cela n'a fonctionné. Y a-t-il même un moyen "natif" dans Google Chrome pour simuler un geste de zoom pincé?
btw j'utilise le Version MacOs de Google Chrome version 59.0.3071.86
4 réponses
sur Chrome 66, en mode simulation d'appareil, double-click-drag up/down zooms out / in.
Maj + clic de souris & glisser à travers le viewport
Fonctionne pour moi. Seul problème, c'est que le touchstart événement sera de retour 1originalEvent.touches
pinch gestes ont différents auditeurs dans différents navigateurs, mais il ya une bibliothèque légère remarquable nommé marteau.js qui manipule pincer, glisser et .... assez facile et bien dans tous les navigateurs, malheureusement, il ne prend pas en charge Chrome De Bureau, de sorte que vous ne pouvez pas déboguer vos codes web-mobile facilement,
Shift-clic de souris&glisser sur le Chrome de bureau avec la bibliothèque de marteau ne fonctionne pas non plus très bien, il active événement Pan de marteau au lieu de pincer et fonctionne juste une fois!, après cela il continue D'appeler L'événement de Pan quand vous déplacez votre souris à travers votre viewport qui est assez ennuyeux et rend le debug impossible.
Solution: Le seul moyen pratique, que je connaisse, de tester vos gestes sur un navigateur mobile est d'utiliser soit la connexion Safari-Safari sur les appareils iOS/osx ou la connexion Chrome-Chrome pour les appareils android.
j'utilise pour déboguer mes codes JavaScript avec Chrome DevTools mais dans les projets web-mobile j'utilise Safari Web Inspector, parce que j'ai un iphone et un Mac!. vous ne pouvez pas non plus déboguer votre appareil ios avec Desktop Chrome.
jetez un oeil à cette article pour savoir comment configurer votre Safari Web Inspector.
Remarque: vous devez connecter votre iphone à votre mac en utilisant le câble usb et activer Web Inspector sur votre iphone (paramètres - > Safari - > Advanced - > Web Inspector) si vous ne pouvez pas voir Développer menu sur votre Safari, allez à Préférences et dans l'onglet Avancé, cochez "Afficher le menu de développement dans la barre de menu". le reste est expliqué dans l'article susmentionné.
mise à Jour
il n'est pas possible de déboguer un appareil ios sur un Safari Windows Desktop.
avec Mac OS, vous pouvez utiliser deux doigts sur le pavé tactile pour simuler un zoom pincé.
peut-être vérifier la configuration de viewport dans la balise meta:
<meta name="viewport" content="initial-scale=1">
Ajouter un maximum-scale à la fenêtre d'affichage de la balise meta pourraient influencer le zoom:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
pourrait vous causer un problème.
vous devriez également pouvoir zoomer en utilisant le pourcentage de zoom en haut des outils de développement page:
