禁用 Webkit（或Electron）中的捏合缩放

Question

有没有办法在Electron应用程序中禁用捏合缩放？

我无法通过常规的javascript方法从web-view内部使其工作，如此处所述：https://dev59.com/BWEh5IYBdhLWcg3wnEcc#23510108

似乎--disable-pinch标记不受Electron支持。

我已经尝试了各种方法，包括：

1. 在javascript的touchmove/mousemove事件上使用event.preventDefault()
2. 在HTML中使用标签
3. 在CSS中使用-webkit-text-size-adjust
4. 针对Electron的标志/配置

是否有适用于Webkit通用或者Electron特定的方法？

- Billy Moon

Answer 1

更新 2：

在渲染进程中使用webFrame.setZoomLevelLimits (v0.31.1+)，详见主进程和渲染进程之间的差异。因为 macOS 上的智能缩放仍然需要通过 document.addEventListener 来工作。

示例 require('electron').webFrame.setZoomLevelLimits(1, 1)

---

更新：

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

演示 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。

抱歉，我找不到更好的解决方案。:(

演示

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

- artanik

---

结合 keydown/keyup 事件检查 ctrlKey 是否被实际按键设置，使用全局标志位来解决区分问题可能是一种解决方案。 - user1693593

Answer 2

似乎很难防止桌面浏览器的双指缩放。

但是，以下是一些想法！

1）通过使用一些手势javascript，如hammer.js，检测Pinch事件，并尝试使用e.preventDefault来阻止它。

或者

2）在css中使用“％”设计所有内容，或使用新的单位，如“vm”等（如果可能）。这样，即使页面被缩放，内容也会保持相同的缩放级别。

祝一切顺利！

- Sandeep

---

感谢您的建议。我尝试了两种解决方案。虽然 Hammer 很棒，但似乎对此无济于事。它似乎将识别器作为事件的一级添加，我认为我需要一些帮助来访问更低级别的功能。第二个解决方案在我将字体大小设置为百分比规则时似乎没有任何效果，包括 body、html 和段落等。 - Billy Moon

Answer 3

来自GitHub的答案：

“如果您正在寻找一种从主进程防止缩放的方法，可以使用以下方法：”

const webContents = mainWindow.webContents;
webContents.on('did-finish-load', () => {
  webContents.setZoomFactor(1);
  webContents.setVisualZoomLevelLimits(1, 1);
  webContents.setLayoutZoomLevelLimits(0, 0);
});

mainWindow是一个变量，用于存储new BrowserWindow的操作，例如：

const mainWindow = new BrowserWindow({
  width: 440,
  height: 750,
  // ...
});

const webContents = mainWindow.webContents;
webContents.on("did-finish-load", () => {
  webContents.setZoomFactor(1);
  webContents.setVisualZoomLevelLimits(1, 1);
  webContents.setLayoutZoomLevelLimits(0, 0);
});

- michal

---

谢谢！这是我桌面应用程序中唯一可行的方法。 - Zhang Buzz

Answer 4

你不能使用的原因是什么呢：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

把它放在头部，可以防止设备缩放。

- cawney

---

哦，这是我想在移动设备上禁用缩放时使用的技巧。当我使用桌面电脑时，从未担心过需要禁用缩放。 - cawney

Answer 5

var app = require('electron')
app.commandLine.appendSwitch('disable-pinch');

通过混合以下两个链接找到解决方案:

1 - https://github.com/electron/electron/issues/8793#issuecomment-289791853

2 - https://github.com/electron/electron/blob/master/docs/api/chrome-command-line-switches.md

- Carlos Oliveira

Answer 6

我不知道为什么，但我必须设置{ passive: false }才能使它工作。

window.addEventListener('wheel', (e) => {
  if(e.ctrlKey) e.preventDefault();
}, { passive: false });

- Motla

Answer 7

我搜索了很久，想找一个简单的方法解决这个问题，但都没有结果。后来我发现了一个叫做fullpage.js的插件，它能够防止缩放手势，同时允许触摸手势。通过使用js/css消除的过程，我发现了一个非常简单的解决方案：

touch-action: none;

将此添加到我的全屏元素中，成功防止了双指缩放，但允许我通过双指缩放来缩放fabricjs对象。太好了!

- J. Barca

---

谢谢，我相信简单的解决方案。 - northernwind

Answer 8

元标签应该可以起作用。尝试使用 minimum-scale=1.0

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">

如果还不行，那就加上最小和最大刻度

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

附注：它仅会禁用移动电话上的缩放功能。

- Kapil Garg

---

它可能适用于移动设备，我想要一个也适用于桌面设备的解决方案。 - Billy Moon

Answer 9

我有最简单的解决方法，只需在您项目的index.html或类似文件中，在script标签中包含electron并按如下配置缩放级别即可：

<script>
const electron = require('electron'); // Include electron
electron.webFrame.setZoomLevelLimits(1, 1); // Set min max zoom level as 1
const { ipcRenderer } = electron;
...
</script>

这在各种设备上都可以完美运行。 在桌面上，viewport meta 标签方法效果不佳，只能解决移动设备的问题。

- Krishna Modi