it-swarm.com.de

Wie simulieren Sie Pinch-Zoom in Google Chrome?

Ich entwickle eine Pinch-Zoom-Funktion für eine in Javascript geschriebene mobile App. Ich möchte dies in Google Chrome mit der Emulationsfunktion für mobile Geräte testen. Aber ich finde keine Möglichkeit, eine Prise Geste zu testen.

Ich habe alles versucht, was ich im Internet finden konnte (Drücken der Umschalttaste und Bewegen der Maus, Drücken der Alt-Taste und Bewegen der Maus). Gibt es in Google Chrome sogar eine "native" Möglichkeit, eine Pinch-Zoom-Geste zu simulieren?

Übrigens verwende ich die MacOs-Version von Google Chrome, Version 59.0.3071.86

30
Philip Claren

In Chrome 66 können Sie im Gerätesimulationsmodus durch Doppelklicken und Ziehen nach oben/unten vergrößern/verkleinern.

3
tokiop

Shift+ щелчок мышью и перетаскивание по области просмотра

Работает для меня. Единственная проблема заключается в том, что событие touchstart вернет 1 для originalEvent.touches

33
vsync

Bei Pinch-Gesten gibt es unterschiedliche Listener in verschiedenen Browsern. Es gibt jedoch eine herausragende, leichte Bibliothek mit dem Namen hammer.js , die Pinch, Swipe und .... ziemlich einfach und gut in allen Browsern handhabt. Leider wird Desktop Chrome nicht unterstützt Sie können Ihre Web-Mobile-Codes nicht einfach debuggen, 

Shift-Mouse-Klick und Ziehen auf Desktop Chrome mit Hammer-Bibliothek funktioniert ebenfalls nicht einwandfrei, es aktiviert das Pan-Ereignis von Hammer anstelle von Prise und funktioniert nur einmal! Danach ruft es Pan-Ereignis auf, wenn Sie die Maus durch Ihren Viewport bewegen, was ziemlich ärgerlich ist macht das Debuggen unmöglich.

Lösung: Die einzige bequeme Möglichkeit, Ihre Gesten in einem mobilen Browser zu testen, besteht darin, entweder eine Safari-zu-Safari-Verbindung auf ios/osx-Geräten oder eine Chrome-zu-Chrome-Verbindung für Android-Geräte zu verwenden.

Ich benutze zum Debuggen meiner JavaScript-Codes mit Chrome DevTools, aber in Web-Mobile-Projekten verwende ich Safari Web Inspector, da ich ein iPhone und einen Mac habe. Sie können Ihr iOS-Gerät auch nicht mit Desktop Chrome debuggen.

Werfen Sie einen Blick auf diesen Artikel , um zu erfahren, wie Sie Ihren Safari Web Inspector einrichten. 

Hinweis: Sie müssen Ihr iPhone über ein USB-Kabel mit Ihrem Mac verbinden und Web Inspector auf Ihrem iPhone aktivieren (Einstellungen-> Safari -> Erweitert -> Web Inspector). Wenn Sie Develop nicht sehen können Menü auf Ihrer Safari, gehen Sie zu Einstellungen und aktivieren Sie unter Erweitert die Option "Entwicklungsmenü in der Menüleiste anzeigen". Der Rest wird in dem oben genannten Artikel erläutert.

Update

Es ist nicht möglich, ein iOS-Gerät unter Windows Desktop Safari zu debuggen.

3
Zich

In Chrome v.71.x.x können Sie den Zoom durch Drücken der "Toggle Device-Symbolleiste" bei den Dev-Werkzeugen und anschließendem Halten der UMSCHALTTASTE gedrückt halten.

1
mEnE

Die letzte Antwort hat fünf negative Stimmen, aber ich möchte sagen, dass der neueste chrome Browser (78) auf der Android Plattform nicht die Funktion Zoom hat. Möglicherweise haben Sie Probleme mit dem Verständnis des Ansichtsfensters. Der Maßstab des Ansichtsfensters ist pinchzoom. Wenn Sie dies so einstellen, kann Ihre Webseite kein Pinchzoom auslösen.

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

Sie können dies in Ihrer Webseite einstellen

<meta name="viewport" content="initial-scale=1, maximum-scale=5, minimum-scale=1, user-scalable=yes">

Die anderen Antworten haben schon gesagt, dass Abkürzungen für Prise Zoomen.

0
GGGin