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

Question

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

现在唯一可行的工作就是停止2点以上触摸事件的事件传播.问题是我们不能在这种情况下做多点触控应用程序,如果你行动迅速,浏览器会在javascript之前做出反应.在我们的测试中,用户偶然发生了这种情况.

我做过Meta标签,它们不起作用.老实说,我希望我可以禁用铬缩放,但我无法找到一种方法来做到这一点.

如何阻止浏览器进行缩放？

Answer 1

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

我们发现了这些可能的(但可能不是长期的)解决方案:

1.使用信息亭模式时禁用捏合/滑动功能

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

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

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

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

夹点缩放功能目前是实验性的,但默认情况下处于启用状态,这可能意味着它将在未来版本中强制启用.如果您处于自助服务终端模式(并控制硬件/软件),则可以在安装时切换此设置,然后阻止Chrome更新.

已在Chromium Issue 304869上删除此设置的路线图票证.

浏览器在javascript之前做出反应可以防止它的事实肯定是一个错误,并已在Chromium bug跟踪器中记录.希望它会在功能永久启用或手指交叉之前得到修复,它们会将其保留为设置.

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

在我们进行的所有测试中,向文档添加preventDefault()会停止Chrome中的缩放(以及所有其他滑动/触摸事件):

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

如果您在DOM中更高级别附加基于触摸的功能,它将在文档的preventDefault()调用之前激活.在Chrome中,包含eventListenerOptions参数也很重要,因为从Chrome 51开始,文档级事件侦听器{passive: true}默认设置为.

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

由于 chrome 80 `overscroll-history-navigation=0` 不起作用 https://bugs.chromium.org/p/chromium/issues/detail?id=1060053 (2认同)

Answer 2

因此,任何绊倒此页面的人都知道Chrome中的标志是禁用"缩放缩放"现在:

谷歌Chrome/Chromium/Canary版本50以上:

chrome://flags/#touch-events

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

chrome://flags/#enable-pinch.

Answer 3

html {
  touch-action:none;
}

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

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