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

Posted 2023-02-21

【中文标题】禁用 Chrome 捏缩放以在信息亭中使用

【英文标题】：Disable Chrome pinch zoom for use in kiosk

【发布时间】：2014-05-24 20:32:16

【问题描述】：

我们在自助服务终端模式下使用 Chrome，但由于最近添加的捏缩放支持，用户意外导致应用程序缩放。 然后他们认为他们已经破坏了它并简单地走开，让应用程序（以及随后的 55 英寸触摸屏）处于损坏状态。

现在唯一起作用的是停止超过 2 点的触摸事件的事件传播。问题是在这种情况下我们不能做多点触控应用程序，如果你动作快，浏览器会在 javascript 之前做出反应。在我们的测试中，这仍然是用户意外发生的。

我已经完成了元标记，它们不起作用。老实说，我希望我可以完全禁用 chrome 缩放，但我找不到这样做的方法。

如何阻止浏览器缩放？

【参考方案1】：

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

我们已经找到了这些可能的（但可能不是长期的）解决方案：

1.使用展台模式时禁用捏合/滑动功能

如果这些命令行设置保留在 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 可以阻止它之前做出反应的事实绝对是一个错误，并已记录在 Chromium bug tracker。希望它会在永久启用该功能之前得到修复，或者他们会将其保留为设置。

3.禁用与您的应用匹配的元素和事件的所有触摸、白名单

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

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

如果您在 DOM 中将基于触摸的功能附加到更高的位置，它将在冒泡到文档的 preventDefault() 调用之前激活。在 Chrome 中，包含 eventListenerOptions 参数也很重要，因为从 Chrome 51 开始，document-level event listener is set to passive: true by default。

这会禁用正常的浏览器功能，例如滑动滚动，但您可能必须自己实现这些功能。如果它是一个全屏、不可滚动的自助服务终端应用，也许这些功能并不重要。

【讨论】：

感谢您指出标志。他们对其进行了初始化，但没有设置禁用标志。有一段时间，这是一个严重的问题。我们有硬件访问权限，因此触发命令行或仅使用标志对我们来说效果很好。

第一个解决方案（chrome flags）对我来说就像一个魅力，非常感谢。

ad 3) 自 Chrome 56（而非 51）起，事件侦听器默认设置为被动

由于 chrome 80 overscroll-history-navigation=0 不起作用 bugs.chromium.org/p/chromium/issues/detail?id=1060053

【参考方案2】：

html 
  touch-action:none;

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

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

【讨论】：

欢迎来到 Stack Overflow！虽然欢迎使用此代码 sn-p，并且可能会提供一些帮助，但它会是 greatly improved if it included an explanation 的 如何 它解决了这个问题。没有这个，你的回答就没有多少教育价值了——记住你是在为未来的读者回答这个问题，而不仅仅是现在提问的人！请edit您的答案添加解释，并说明适用的限制和假设。特别是，这如何仍然允许单点触摸事件工作？

该解决方案非常适合在 Kiosk 模式下运行在 ChromeOS 设备上并通过 Google Chrome 管理进行管理的 Angular 应用程序。 chrome 标志方法有效，但通过 Chrome 管理设置这些标志似乎不是一种选择。感谢您的直截了当的回答。

这太棒了！谢谢。

【参考方案3】：

任何偶然发现此页面的人都知道 Chrome 中禁用“捏缩放”的标志现在是：

Google Chrome/Chromium/Canary 50 以上版本：

chrome://flags/#touch-events

Google Chrome/Chromium/Canary 版本低于 50 或旧版本：

chrome://flags/#enable-pinch。

【讨论】：

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

相对较旧的帖子，但我现在也遇到了这个问题，我只需要禁用捏缩放。与 Chrome 58 完美配合，但在 Chromium 51 中启动却不行。

【参考方案4】：

我正在处理同样的问题。我认为我可以通过以下方法很好地处理它

确定html元素的css像素宽度：document.documentElement.clientWidth 将此测量结果与信息亭屏幕的已知像素宽度进行比较 如果 html 元素以 css 像素为单位比屏幕以物理像素为单位更宽，则表示它已缩放 如果 html 元素被缩放，则对 body 元素应用缩放以进行补偿。公式是`body.style.zoom = htmlElementClientWidth / screenPhysicalPixelWidth

此技术具有自动将 UI 缩放到当前窗口大小的有益副作用，如果我在小于目标屏幕的屏幕上进行开发，这对开发很有帮助。

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

【讨论】：

随着对 Chrome 标志的更改，这是我们采用的方法。 Here 是检测缩放级别的好链接。我们监听 resize 事件并使用 CSS 进行调整。

@DennisSmolek 你能详细说明一下吗？链接到代码示例？谢谢

【参考方案5】：

目前在 Chrome (54) 中有效的另一个解决方案是为 'touchstart' 事件添加一个事件侦听器，并根据事件上的 targetTouches 或 touches 的长度调用 preventDefault()。

此解决方案可防止捏合（任何两指手势），但仍可让您灵活应对事件的响应方式。这是一个很好的解决方案，因为它不需要您完全禁用触摸事件（如果您想使用 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)

【讨论】：

我仍然可以在 JS 阻止我之前用捏捏来击败它。所以页面被放大但现在几乎不可能缩小。

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

是的，在 windows 上，chrome 浏览器会在 javascript 阻止它们之前启动辅助功能。所以有人捏会导致缩放。这很难做到，但如果我一遍又一遍地尝试，我可以复制它。因此，当访问者在玩屏幕时，他们可能会不小心将其放大，然后就会卡住..

【参考方案6】：

从版本 51.0.2704.84 m 开始，chrome://flags/#touch-events 会禁用所有触摸事件，而不仅仅是捏合功能。供参考。希望 Google 会在未来的版本中返回此功能。