如何在Google Chrome中模拟捏缩放？

Question

我正在为用javascript编写的移动应用程序开发一个缩放缩放功能，我想在Google Chrome中使用移动设备模拟功能对其进行测试。但我找不到测试捏手势的方法。

我尝试了在互联网上找到的所有东西（按住Shift并移动鼠标，按下Alt并移动鼠标），但这些都没有效果。 Google Chrome中是否存在“原生”方式来模拟缩放缩放手势？

顺便说一下，我使用的是MacO版Google Chrome版本59.0.3071.86

Answer 1

Shift +鼠标单击并拖动视口

适合我。唯一的问题是touchstart事件将返回1为originalEvent.touches

Answer 2

捏手势在不同的浏览器中有不同的听众，但有一个非常出色的轻量级库，名为hammer.js，可以处理捏，滑动......在所有浏览器中都非常简单和精细，不幸的是它不支持桌面Chrome，所以你无法调试你的网页 - 移动代码很容易，

Shift-Mouse单击并拖动桌面Chrome上的锤子库也不能正常工作，它会激活锤子的Pan事件而不是捏合并只能工作一次！之后它会在您将鼠标移动到视口时一直调用Pan事件，这非常烦人使调试不可能。

解决方案：我知道，在移动浏览器上测试手势的唯一方便方法是在ios / osx设备上使用Safari连接Safari，或者在Android设备上使用Chrome到Chrome连接。

我用Chrome DevTools调试我的JavaScript代码，但在网络移动项目中我使用Safari Web Inspector，因为我有一个iphone和一台Mac！您也无法使用桌面Chrome调试您的ios设备。

看看这个article，了解如何设置Safari Web Inspector。

注意：您需要使用usb-cable将iphone连接到Mac并在iphone上启用Web Inspector（设置 - > Safari - >高级 - > Web检查器）如果您无法在Safari上看到“开发”菜单，请转到“首选项”并在“高级”选项卡中选中“在菜单栏中显示开发菜单”。其余的在上面提到的文章中解释。

更新

无法在Windows桌面Safari上调试ios设备。

Answer 3

在Chrome 66上，在设备模拟模式下，双击 - 向上/向下拖动缩小/缩小。

Answer 4

在Chrome v.71.x.x上，您可以在开发工具中按住“切换设备工具栏”并按住SHIFT并单击并拖动鼠标来缩放缩放。

Answer 5

最后一个答案有5个反对票，但我想说的是Android平台上最新的Chrome浏览器（78）没有缩放功能。您对视口的理解可能会遇到一些问题。视口的比例是pinchzoom。如果您这样设置，您的网页无法触发pinchzoom。

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

您可以在网页中设置此方式

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

其他答案已经说过捏缩放的快捷方式。

Answer 6

使用Mac OS，您可以在触摸板上使用两根手指来模拟捏缩放。

也许检查元标记中的视口设置：

<meta name="viewport" content="initial-scale=1">

将maximum-scale添加到视口元标记可能会影响缩放：

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

可能会给你带来麻烦。

您还应该能够使用开发人员工具页面顶部的缩放百分比进行缩放：