如何在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

另一种解决方案用于测试。使用 chrome 手机模拟器 + 在 0,0 点进行第二次触摸：

function handleTouchStart(e) {
    var touches=e.targetTouches;
    touches=
        [
            {
                pageX:touches[0].pageX,
                pageY:touches[0].pageY
            },
            {
                pageX:0,
                pageY:0
            }
    ]; 
    //now use the touches variable as the list of touches.

}

Answer 3

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

Answer 4

如果您手头有移动设备，则可以将该设备连接到桌面计算机，并使用远程设备功能在桌面上调试手机。

对于安卓：

1. 启用开发者模式和 USB 调试。

2. 在桌面上转到 DevTools，然后单击三点菜单下的更多工具 > 远程设备

3. 检查发现 USB 设备选项。您会在手机上看到授权弹出窗口。允许它并继续。

4. 在手机上打开 Chrome，您应该能够检查手机上的所有选项卡。作为奖励，您可以使用端口转发将桌面本地主机转发到设备的本地主机，因此如果您在桌面上运行开发应用程序，则可以在移动设备上调试它。

对于iPhone：我不太熟悉这里的细节，因为我自己无法尝试，但我相信您可以通过chrome://inspect并开始记录来启用它。

来源： https ://dev.to/dev0x0/using-google-chrome-console-on-any-mobile-device-9ec

Answer 5

捏手势在不同的浏览器中具有不同的侦听器，但是有一个出色的轻量级库，名为Hammer.js，可处理捏合，滑动和....在所有浏览器中都非常简单，不错，不幸的是它不支持Desktop Chrome，因此您无法调试您的网络移动电话可以轻松编码

在带有锤子库的桌面Chrome上按住Shift键并单击并拖动鼠标也无法正常工作，它会激活锤子的Pan事件而不是捏动，并且只能运行一次！之后，当您将鼠标移过视口时，它会继续调用Pan事件，这很烦人，使调试成为不可能。

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

我曾经使用Chrome DevTools调试JavaScript代码，但是在网络移动项目中，我使用Safari Web Inspector，因为我有iphone和Mac！您也无法使用Desktop Chrome调试ios设备。

查看本文，了解如何设置Safari Web Inspector。

注意：您需要使用USB电缆将iPhone连接到Mac，并在iPhone上启用Web Inspector（设置-> Safari->高级-> Web Inspector）如果无法在Safari上看到“ 开发”菜单，请转到“首选项”在“高级”选项卡中，选中“在菜单栏中显示开发菜单”。其余的将在上述文章中进行解释。

更新资料

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

Answer 6

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