禁用Chrome捏合缩放以在信息亭中使用

Question

禁用Chrome捏合缩放以在信息亭中使用

52

我们正在使用 Chrome 的 kiosk 模式，不小心用户最近会通过捏合缩放的支持导致应用程序缩放。他们然后认为他们已经破坏了它，只是离开了应用程序（随后是一台55英寸的触摸屏处于破碎状态）。现在唯一能工作的方法是停止传播超过2个点的触摸事件。这样做的问题在于我们不能在此情况下进行多点触控应用程序，并且如果您行动迅速，浏览器会在 javascript 之前反应，我们在测试中发现这还是会出现用户意外操作的情况。我设定了 Meta 标签，但它们不起作用。说实话，我希望我可以完全禁用 chrome 缩放，但我找不到方法来实现。如何停止浏览器缩放？

- Dennis Smolek

6个回答

23

html {
  touch-action:none;
}

这将禁用浏览器对所有平移和缩放手势的处理。手势仍然可以由JavaScript代码处理。

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

大多数浏览器默认手势都是在html元素上触发的，禁用touch-action将禁用所有默认手势，如捏放缩、拖动导航等。

然而，与接受的答案相反，这将不会禁用触摸手势，允许在页面的每个元素上处理触摸事件。

- phil

欢迎来到 Stack Overflow！虽然这段代码片段很受欢迎并且可能提供了一些帮助，但如果它包含了对于如何解决问题的解释，那么它将会更加有用 (参考链接)。如果没有解释，那么你的回答教育价值将会大打折扣——请记住，你正在为未来的读者回答问题，而不仅仅是现在提问的人！请编辑你的回答，添加解释，并指出所应用的限制和假设。特别地，请说明这如何仍然允许单触事件工作？ - Toby Speight

2

这个解决方案非常适用于在Kiosk模式下在ChromeOS设备上运行的Angular应用，并通过Google Chrome管理进行管理。虽然使用Chrome管理设置那些标志是可行的，但似乎并不是一种选择。感谢直接的回答。 - tlaughlin

2

这太棒了！谢谢。 - Jonathan Tuzman

对于我的使用情况来说，这绝对是最佳选择，即使与被接受的答案中的所有替代方案相比也是如此：它不依赖于命令行选项，也不完全禁用触摸手势，而是禁用了所有内置手势，如捏放缩、左右拖动以返回或前进浏览器历史记录等。这太棒了！ - undefined

9

提醒所有访问此页面的人，现在在Chrome中禁用“双指缩放”的标志如下：

Google Chrome / Chromium / Canary 50版以上：

chrome://flags/#touch-events

Google Chrome / Chromium / Canary 50版以下或旧版：

chrome://flags/#enable-pinch

- James Lott

#touch-events：禁用全触摸屏幕而不仅仅是捏合缩放。所以从版本50开始，捏合已被删除，不再存在了吗？你能重新测试一下吗？ - user285594

这是一个比较旧的帖子，但我现在也遇到了同样的问题，我只需要禁用捏合缩放功能。在Chrome 58中可行，但在Chromium 51中不行。 - KDT

3

我遇到了同样的问题。我认为我可以通过以下方法合理地处理它：

确定HTML元素的CSS像素宽度：document.documentElement.clientWidth
将此测量值与自助式屏幕的已知像素宽度进行比较
如果HTML元素在CSS像素上比屏幕在物理像素上更宽，则表示它被缩放了
如果HTML元素被缩放，请对body元素应用缩放来进行补偿。公式为 `body.style.zoom = htmlElementClientWidth / screenPhysicalPixelWidth`

此技术的有益副作用是自动缩放UI以适应当前窗口大小，这对于开发人员来说非常有帮助，因为他们可以在比目标屏幕小的屏幕上开发。

关于屏幕像素与CSS像素的更多信息，以及有关HTML元素如何扩展以填充可用空间的讨论，请参见quirksmode.org。

- morgancodes

随着Chrome Flags的更改，这是我们采用的方法。这里有一个很好的链接，可以检测缩放级别。我们监听调整大小事件并使用CSS进行调整。 - Dennis Smolek

@DennisSmolek 你能详细说明一下吗？有代码示例链接吗？谢谢。 - DeBraid

3

另一种目前在Chrome（54）中有效的解决方案是添加一个事件监听器，针对事件的'touchstart'调用preventDefault()，这取决于事件上targetTouches或touches的长度。

该解决方案可防止捏合手势（任何两个手指的手势），但仍提供了您想要响应事件的灵活性。这是一个很好的解决方案，因为它不需要您完全禁用触摸事件（如果要使用chrome标志禁用捏合，则需要这样做，因为chrome：// flags /＃enable-pinch已经不存在）。

window.addEventListener('touchstart', function(e) {
  if (e.targetTouches.length === 2) {
    e.preventDefault();
  }
}, false);

Some text that you can't pinch zoom on Chrome (tested in 54)

- wgardiner

我仍然可以在JS停止之前用捏合击败它。所以页面被放大了，但现在几乎不可能缩小。 - Dennis Smolek

你是说有时浏览器在preventDefault运行之前处理事件？但这种行为不一致？我没有遇到过这种情况，但我想测试一下。 - wgardiner

1

是的，在Windows上，Chrome浏览器会在JavaScript能够阻止它们之前启动可访问性功能。因此，有人捏屏幕会导致缩放。这很难做到，但如果我一遍又一遍地尝试，我可以复制它。所以当访客玩弄屏幕时，他们可能会意外地缩放它，然后它就会卡在那里。 - Dennis Smolek

0

从版本51.0.2704.84 m开始，chrome://flags/#touch-events不仅禁用了捏合功能，还禁用了所有触摸事件。希望Google在未来的版本中恢复此功能。

- wendecator

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JimmyG · Accepted Answer

我们遇到了类似的问题，表现为浏览器缩放但javascript没有接收到触摸事件（有时只有在缩放开始前会接收到一个点）。

我们找到了以下可能的解决方案（但可能不是长期有效）： 1. 在使用展示模式时禁用pinch/swipe功能 如果在Chrome中这些命令行设置仍然存在，您可以执行以下操作：

chrome.exe --kiosk --incognito --disable-pinch --overscroll-history-navigation=0

--disable-pinch - 禁用捏合缩放功能
--overscroll-history-navigation=0 - 禁用滑动导航功能

2. 使用Chrome标志chrome://flags/#enable-pinch禁用捏合缩放

在浏览器中导航到URL chrome://flags/#enable-pinch，并禁用该功能。

捏合缩放功能目前处于实验阶段，但默认已开启，这可能意味着它将在未来版本中被强制启用。如果您处于展示模式（并控制硬件/软件），则可以在安装时切换此设置，然后防止Chrome更新进行。

已经有一个路线图票据Chromium Issue 304869来删除此设置。

浏览器在JavaScript之前做出反应的事实肯定是一个bug，并已在Chromium bug tracker中记录。希望在永久启用该功能之前修复它，或者他们会将其保留为设置。

3. 禁用所有触摸事件，为与您的应用程序匹配的元素和事件设置白名单

在我们进行的所有测试中，将preventDefault（）添加到文档中可以停止Chrome中的缩放（以及所有其他滑动/触摸事件）：

document.addEventListener('touchstart', function(event){
    event.preventDefault();
}, {passive: false});

如果您将基于触摸的功能附加到DOM中更高的位置，则在冒泡到文档的preventDefault()调用之前它会被激活。在Chrome中，还重要包括eventListenerOptions参数，因为从Chrome 51开始，默认情况下会设置一个文档级别的事件监听器{passive: true}。

这会禁用常规浏览器功能，例如滑动滚动条，您可能需要自己实现这些功能。如果是全屏不可滚动的展示应用程序，则这些功能可能不重要。