Question

我们在自助服务终端模式下使用Chrome，并且意外地用户使用最近添加的缩放缩放支持使应用程序变焦。然后他们认为他们已经打破了它并且干脆离开应用程序（以及随后的55＆＃34;触摸屏）处于破碎状态。

现在唯一可行的工作就是停止2点以上的触摸事件的事件传播。这方面的问题是我们无法在这种情况下执行多点触控应用程序，如果您采取快速行动，浏览器会在javascript之前做出反应。在我们的测试中，用户偶然发生了这种情况。

我已完成Meta标签，但它们无效。老实说，我希望我可以禁用铬缩放，但我无法找到一种方法来做到这一点。

如何停止浏览器缩放？

Answer 1

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

我们发现了这些可能的（但可能不是长期的）解决方案：

<强> 1。使用自助服务终端模式时禁用捏合/滑动功能

如果这些命令行设置仍保留在Chrome中，您可以执行以下操作：

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

- 禁用 - 缩放 - 禁用缩放缩放功能
- 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。

这会禁用普通的浏览器功能，例如滑动以滚动，您可能需要自己实现这些功能。如果它是一个全屏，不可滚动的自助服务终端应用程序，那么这些功能可能并不重要。

Answer 2

因此，任何绊倒此页面的人都知道Chrome中的标志会禁用“缩放缩放”现在：

Google Chrome / Chromium / Canary版本50以上

chrome://flags/#touch-events

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

chrome://flags/#enable-pinch。

Answer 3

我正在处理同样的问题。我想我可以用以下方法很好地处理它

确定html元素的css像素宽度：document.documentElement.clientWidth
将此测量值与自助服务终端屏幕的已知像素宽度进行比较
如果html元素更宽，css像素比屏幕更宽，在物理像素中，这意味着它被缩放
如果缩放html元素，则对body元素应用缩放以进行补偿。公式是`body.style.zoom = htmlElementClientWidth / screenPhysicalPixelWidth

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

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

Answer 4

html {
  touch-action:none;
}

这将禁用浏览器处理所有平移和缩放手势。该手势仍可通过javascript代码处理。

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

Answer 5

目前适用于Chrome（54）的另一个解决方案是为Map<Integer, Collection<Bill>>事件添加事件监听器，并根据'touchstart'或{{1}的长度调用preventDefault()关于这个事件。

此解决方案可以防止捏（对此任何两个手指），但仍然可以灵活地响应事件的响应方式。这是一个不错的解决方案，因为它并不要求您完全禁用触摸事件（如果您想要使用chrome标记禁用pinch，则需要targetTouches不再存在）。

＆＃13;

touches

＆＃13;

chrome://flags/#enable-pinch

＆＃13;

Answer 6

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

禁用Chrome捏缩放以在自助服务终端中使用

6 个答案: