谷歌浏览器 - 禁用捏缩放

Posted 2023-05-08

【中文标题】谷歌浏览器 - 禁用捏缩放

【英文标题】：Google chrome - disable pinch zoom

【发布时间】：2018-09-01 12:33:56

【问题描述】：

我在火车站公共场所和机场都有一个售货亭。

随机人需要使用在谷歌浏览器上运行的触摸屏应用程序。当用户在 Google chrome 上应用 unpinch 或 pinch 操作时 然后谷歌浏览器异常放大屏幕并让屏幕永远放大，然后我接到电话说我的应用程序不起作用。

在过去使用 chrome://flags/#enable-pinch 谷歌浏览器能够消除压力，但现在在新版本中，他们删除了该功能，还遵循选项，它们都不再像过去使用``chrome://flags/ 那样工作了#enable-pinch`

chrome://flags/#touch-events - 如果我禁用它，它会禁用谷歌浏览器上的整个触摸输入

<meta name="viewport" content="width=device-width, user-scalable=no"> - 如果我应用它，它对谷歌浏览器没有影响，仍然会发生捏/松开攻击

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

因为所有选项都失败了，所以我把头发都拉出来了。

谁能告诉我如何解决它？如何在 Google chrome 或整个操作系统上完全禁用捏合/取消捏合？我也尝试了控制面板，但没有一个控制面板显示禁用捏合/松开攻击的选项。

// 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
    

【问题讨论】：

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' /> 可以工作吗？

那也行不通，仍然捏，松开是活动的。

您可以通过基于视口的元素大小（CSS 示例：width: 50vw; height: 50vh;）或渲染到 <cavas> 元素并保持其大小为 100% 来解决此问题。这将导致缩放无效。当然，如果您要重写很多内容，这可能比它的价值更麻烦。我相信您可以使用 javascript 检测浏览器是否放大，因此显示一条消息，指示用户如何再次缩小也可能就足够了。这听起来很重要，不管它是什么，所以我希望你能解决它并让你的老板满意。

【参考方案1】：

回答：2018

我一直在尝试使用自助服务终端应用程序解决相同的问题。我已经尝试过元标记和触摸事件，但应用程序方面的任何东西都不适合我。

最后我找到的解决方案是在 kiosk 模式下启动 Chrome 时从命令行禁用捏合

这是一个例子：

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

【讨论】：

大声笑，我希望我们可以从网页上做到这一点

【参考方案2】：

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

您正在寻找的属性是 touch-action，正如 MDN 所解释的：

touch-action CSS 属性指定是否以及以何种方式 用户可以通过触摸屏操作给定区域（例如 例如，通过浏览器内置的平移或缩放功能）

禁用所有捏合缩放的基本解决方案是将以下代码 sn-p 放在您的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

【讨论】：

应该注意其他人来这个线程寻找 iOS 的解决方案，触摸动作：iOS Safari 不支持。