问题描述

有没有办法禁用 electron 应用程序中的缩小缩放？

我不能让它从 web-view 里面正常工作的 JavaScript 方法，如下所述：https://stackoverflow.com/a/23510108/665261

看来--disable-pinch 标志是 not supported by electron 。

我已经尝试过各种方法：

  1. event.preventDefault()在 javascript touchmove/mousemove 事件

  2. HTML 中的 meta viewport 标签

  3. -webkit-text-size-adjust 在 CSS 中

  4. 电子标志/配置

一般来说，是否有任何方法用于 webkit，特别是 electron？

最佳解决思路

更新 2：

在渲染过程中使用 webFrame.setZoomLevelLimits(v0.31.1 +)(Differences Between Main Process and Renderer Process) 。因为 mac 上的智能缩放仍然可以使用 document.addEventListener 。

实施例 require('electron').webFrame.setZoomLevelLimits(1, 1)

更新：

deltaY 属性用于缩小缩放有 float 的值，但正常滚动事件返回 int 的值。现在解决方案没有 ctrl 键的问题。

Demo 2 。

document.addEventListener('mousewheel', function(e) {
  if(e.deltaY % 1 !== 0) {
    e.preventDefault();
  }
});

使用 Chromium monitorEvents(document)我发现负责此事件 mousewheel 。我不知道为什么 mousewheel 用捏缩动触发。下一步，找到正常滚动和夹点缩放之间的区别。

捏合缩放具有属性 e.ctrlKey = true，正常滚动事件具有 e.ctrlKey = false 。但是如果按住 ctrl 键并滚动页面，e.ctrlKey 等于 true 。

我找不到更好的解决方案:(

Demo

document.addEventListener('mousewheel', function(e) {
  if(e.ctrlKey) {
    e.preventDefault();
  }
});

次佳解决思路

桌面浏览器似乎很难防止捏缩。

这里有一些想法！

1) 通过使用一些手势 javascript 像 hammer.js，检测 Pinch 事件并尝试使用 e.preventDefault 来防止它

要么

2) 使用 css 中的”%” 设计所有内容，或者使用像”vm” 等更新的单元 (如果可能的话) 。这样，即使是页面也会被放大，但是对于任何缩放级别，内容将保持不变。

祝一切顺利！

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。