我们在kiosk模式下使用Chrome,用户不小心导致应用程序在最近添加的捏缩放支持下缩放。然后他们认为他们已经破坏了它,然后简单地走开,让应用程序(以及随后的55英寸触摸屏)处于损坏状态。
现在唯一能做的就是停止超过2点的触摸事件的事件传播。问题是我们不能在这种情况下做多点触摸应用程序,如果你动作快,浏览器会在JavaScript之前做出React。在我们的测试中,这仍然会发生在用户意外的情况下。
我已经做了Meta标签,他们不工作。老实说,我希望我可以禁用Chrome缩放,但我找不到一种方法来做到这一点。
如何阻止浏览器缩放?
6条答案
按热度按时间mlmc2os51#
我们遇到过类似的问题,它表现为浏览器缩放,但JavaScript没有接收到触摸事件(或者有时只是缩放开始前的一个点)。
我们已经找到了这些可能的(但可能不是长期的)解决方案:
1.使用kiosk模式时,关闭捏/刷功能
如果这些命令行设置保留在Chrome中,您可以执行以下操作:
字符串
*--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中的缩放(以及所有其他滑动/触摸事件):
型
如果你在DOM中的更高位置附加了基于触摸的功能,它会在冒泡到文档的preventDefault()调用之前激活。在Chrome中,包含eventListenerOptions参数也很重要,因为从Chrome 51开始,它是document-level event listener is set to
{passive: true}
by default。这将禁用普通浏览器的功能,如滑动滚动,但你可能必须自己实现这些功能。如果它是一个全屏,不可滚动的kiosk应用程序,也许这些功能并不重要。
2w3rbyxf2#
字符串
这将禁用浏览器对所有平移和缩放手势的处理。JavaScript代码仍然可以处理该手势。
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
考虑到大多数浏览器默认手势都是在
html
元素上触发的,因此在其上禁用touch-action
将禁用所有默认手势,如捏缩放,拖动导航等。然而,与公认的答案相反,这将 * 不 * 禁用触摸手势,允许处理页面每个元素上的触摸事件。
8yparm6h3#
任何人在浏览这个页面时都会意识到Chrome中禁用"缩放“的标志现在是:
Google Chrome/Chromium/Canary 50以上版本:
第一个月
Google Chrome/Chromium/Canary版本低于50或更早版本:
chrome://flags/#enable-pinch
的值。“bihw5rsg4#
我正在处理同样的问题。我认为我可以用以下方法处理得相当好
document.documentElement.clientWidth
这项技术的一个有益的副作用是,可以自动将UI缩放到当前窗口的任何大小,如果我在比目标屏幕小的屏幕上开发,这对开发很有帮助。
更多关于屏幕像素与css像素的讨论,以及如何扩展html元素以填充quirksmode.org处的可用空间。
oknwwptz5#
Chrome(54)中目前有效的另一种解决方案是为
'touchstart'
事件添加一个事件侦听器,并根据事件上targetTouches
或touches
的长度调用preventDefault()
。这个解决方案可以防止捏(任何两个手指的手势),但仍然提供了灵活性,你想如何响应事件。这是一个很好的解决方案,因为它不需要你完全禁用触摸事件(如果你想使用Chrome标志禁用捏,因为
chrome://flags/#enable-pinch
不再存在)。qvk1mo1f6#
从版本51.0.2704.84 m开始,Chrome://flags/#touch-events禁用了所有的触摸事件,不仅仅是捏功能。供参考。希望Google在未来的版本中会返回此功能。