禁用Chrome捏缩放以在kiosk中使用

sqxo8psd  于 11个月前  发布在  Go
关注(0)|答案(6)|浏览(149)

我们在kiosk模式下使用Chrome,用户不小心导致应用程序在最近添加的捏缩放支持下缩放。然后他们认为他们已经破坏了它,然后简单地走开,让应用程序(以及随后的55英寸触摸屏)处于损坏状态。
现在唯一能做的就是停止超过2点的触摸事件的事件传播。问题是我们不能在这种情况下做多点触摸应用程序,如果你动作快,浏览器会在JavaScript之前做出React。在我们的测试中,这仍然会发生在用户意外的情况下。
我已经做了Meta标签,他们不工作。老实说,我希望我可以禁用Chrome缩放,但我找不到一种方法来做到这一点。
如何阻止浏览器缩放?

mlmc2os5

mlmc2os51#

我们遇到过类似的问题,它表现为浏览器缩放,但JavaScript没有接收到触摸事件(或者有时只是缩放开始前的一个点)。
我们已经找到了这些可能的(但可能不是长期的)解决方案:

1.使用kiosk模式时,关闭捏/刷功能

如果这些命令行设置保留在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并禁用该功能。
捏缩放功能目前是实验性的,但默认情况下是打开的,这可能意味着它将在未来的版本中被强制启用。如果你在kiosk模式(并控制硬件/软件),你可能会在安装时切换此设置,然后阻止Chrome更新。
Chromium Issue 304869上已经有了移除此设置的路线图票据。
事实上,浏览器在JavaScript可以阻止它之前就做出了React,这绝对是一个bug,已经在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
这将禁用普通浏览器的功能,如滑动滚动,但你可能必须自己实现这些功能。如果它是一个全屏,不可滚动的kiosk应用程序,也许这些功能并不重要。

2w3rbyxf

2w3rbyxf2#

html {
  touch-action:none;
}

字符串
这将禁用浏览器对所有平移和缩放手势的处理。JavaScript代码仍然可以处理该手势。
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
考虑到大多数浏览器默认手势都是在html元素上触发的,因此在其上禁用touch-action将禁用所有默认手势,如捏缩放,拖动导航等。
然而,与公认的答案相反,这将 * 不 * 禁用触摸手势,允许处理页面每个元素上的触摸事件。

8yparm6h

8yparm6h3#

任何人在浏览这个页面时都会意识到Chrome中禁用"缩放“的标志现在是:

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

第一个月

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

chrome://flags/#enable-pinch的值。“

bihw5rsg

bihw5rsg4#

我正在处理同样的问题。我认为我可以用以下方法处理得相当好

  • 确定html元素的css像素宽度:document.documentElement.clientWidth
  • 将该测量值与信息亭屏幕的已知像素宽度进行比较
  • 如果html元素在css像素中比屏幕在物理像素中更宽,这意味着它被缩放了。
  • 如果html元素被缩放,则对body元素应用缩放以进行补偿。公式为`body.style.zoom = htmlElementClientWidth / screenPhysicalPixelWidth

这项技术的一个有益的副作用是,可以自动将UI缩放到当前窗口的任何大小,如果我在比目标屏幕小的屏幕上开发,这对开发很有帮助。
更多关于屏幕像素与css像素的讨论,以及如何扩展html元素以填充quirksmode.org处的可用空间。

oknwwptz

oknwwptz5#

Chrome(54)中目前有效的另一种解决方案是为'touchstart'事件添加一个事件侦听器,并根据事件上targetTouchestouches的长度调用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)
qvk1mo1f

qvk1mo1f6#

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

相关问题