Question

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

我尝试了在互联网上找到的所有东西（按住Shift并移动鼠标，按下Alt并移动鼠标），但这些都没有效果。甚至有一个＆＃34;本地人＆＃34;在谷歌浏览器中模拟缩放缩放手势的方式？

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

Answer 1

Shift +鼠标点击＆amp;拖过视口

适合我。唯一的问题是touchstart事件将为1

返回originalEvent.touches

Answer 2

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

Answer 3

Pinch手势在不同的浏览器中有不同的侦听器，但是有一个名为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（设置 - ＆gt; Safari - ＆gt;高级 - ＆gt; Web Inspector）如果您无法在Safari上看到开发菜单，转到偏好设置，在高级选项卡中选中“在菜单栏中显示开发菜单”。其余部分在上述文章中解释。

<强>更新

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

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

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

import Data.List
import System.IO

example :: (Num a) => a -> a
example x = x + x
main = do
  print (example(3))

Answer 7

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

对于Android：

启用开发人员模式和USB调试。
在桌面上转到DevTools，然后在三个点菜单下单击“更多工具”>“远程设备”
选中“发现USB设备”选项。您会在手机上看到一个授权弹出窗口。允许并继续。
在手机上打开Chrome，您应该可以检查手机上的所有标签。作为奖励，您可以使用端口转发将桌面本地主机转发到设备的本地主机，因此，如果您在桌面上运行开发应用程序，则可以在移动设备上对其进行调试。

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

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

Answer 8

这可能不是开发人员的答案。我一直遇到扩大网页的问题。然后页面坏了。许多网页不支持正常缩放。 Mouse Pinch-To-Zoom 可用于一般网络。

Answer 9

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

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

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

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

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

可能会给您带来麻烦。

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

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

9 个答案: