谷歌浏览器 - 禁用捏合缩放

Question

我在火车站和机场有一个自助亭。

随机的人们需要使用运行在Google Chrome上的触摸屏应用程序。当用户在Google Chrome上执行unpinch或pinch操作时，Google Chrome会使屏幕异常缩放，并且保持屏幕永久缩放状态，然后我会接到电话说我的应用程序无法工作。

使用过去的Google Chrome中的 chrome：// flags /＃enable-pinch 可以杀死pinch，但现在在新版本中他们也删除了该功能，而且以下选项不再像过去使用``chrome：// flags /＃enable-pinch

chrome：// flags /＃touch-events - 如果我禁用它，它会禁用Google Chrome上的所有触摸输入

<meta name="viewport" content="width=device-width, user-scalable=no"> - 如果我应用这个，它对Google Chrome没有影响，仍然出现pinch / unpinch攻击

因此，我一直在尝试其他可能的解决方法

我正在拼尽全力，因为所有选项都失败了。

有人能否请教如何解决？如何完全禁用Google Chrome或整个操作系统上的pinch / unpinch？我还尝试了控制面板，但是没有一个控制面板显示禁用pinch / unpinch攻击的选项。

// Dear God, please give me a Pinch disable option for, Google chrome. Its a nightmare, nothing stops pinch zoom actions.
window.addEventListener("touchstart", touchHandler, false);
function touchHandler(event){
    if(event.touches.length > 1){
      console.log("pinch "); // detected
      window.location.reload();// detected
      try {
        event.preventDefault(); // FAIL FAIL FAIL FAILLLLLLLL ???????????
        return false;
      }catch(eee) {
      }
    }
    else {
      console.log("pinch not");//detected
    }
}

- user285594

---

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' /> 这个会起作用吗？ - Christian Scott

那也不起作用，仍然可以捏和松开。 - user285594

你可以通过基于视口大小来设置元素的大小（CSS示例：width: 50vw; height: 50vh;）或者渲染到一个 <canvas> 元素并保持其大小为100% 来解决这个问题。这样就不会受到缩放的影响。当然，如果你需要重写大量内容，这可能会带来更多麻烦。我相信你可以使用JavaScript检测浏览器是否被缩放，因此显示一条消息告诉用户如何缩小页面也是可以的。无论这是什么，它听起来都很重要，所以我希望你能解决它并让你的老板满意。 - spacer GIF

Answer 1

答案: 2018

我一直在尝试解决一个与自助服务应用有关的问题。我尝试了meta标签和触摸事件，但是应用程序方面的任何东西对我都没有用。

最后我找到的解决方案是，在启动kiosk模式下的Chrome时，从命令行禁用pinch功能。

以下是示例:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --start-fullscreen  --kiosk 
--disable-pinch  http://127.0.0.1:1000

- Adam Hughes

---

哈哈，我希望我们能够从网页上做到这一点。 - Joel Teply

Answer 2

我猜我有点晚了，但对于下一个通过Google找到这个问题的人来说，解决方案实际上非常简单，只需使用纯 CSS 即可。

你要寻找的属性是 touch-action，根据 MDN 的解释：

“touch-action CSS 属性指定是否以及以何种方式通过触摸屏幕 (例如，通过浏览器内置的平移或缩放功能) 来操作给定区域。”

一个基本的禁用所有缩放手势的解决方案是将以下代码片段放置在你的 CSS 中。

body {
    touch-action: none;
}

还有其他选项，如pan-x、pan-left、pan-right、pan-y、pan-up、pan-down和pinch-zoom。

请查看完整文档@https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

- Rabbi Shuki Gur

---

值得注意的是，如果其他人来到这个帖子寻找iOS解决方案，需要注意的是，在iOS Safari中不支持touch-action: none。 - Hiram Hibbard

在HTML上添加“touch-action：none;”就解决了问题。谢谢！ - kapv89