在 webkit（或 electron）中禁用捏合缩放

Question

有什么方法可以在 electron 应用程序中禁用缩放功能？

我无法使用此处所述的正常 javascript 方法从网络视图内部运行它：

--disable-pinch 标志似乎是 not supported by electron。

我尝试了多种方法：

event.preventDefault() javascript touchmove/mousemove 事件
meta viewport 个标签在 HTML
-webkit-text-size-adjust 在 CSS
flags/config 电子

一般的 webkit 或特定的 electron 有什么方法吗？

Answer 1

更新 2：

使用webFrame.setZoomLevelLimits (v0.31.1+) in render process (Differences Between Main Process and Renderer Process）。因为 mac 上的智能缩放仍然适用于 document.addEventListener。

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

更新：

deltaY 属性捏缩放具有 float 值，但正常滚动事件 return 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();
  }
});

Answer 2

有没有不能使用的原因：

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

将它放在页眉中，这样可以防止设备缩放。

Answer 3

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

这里有一些想法！

1) 通过使用一些手势 javascript 如 hammer.js，检测捏合事件并尝试使用 e.preventDefault

阻止它

或

2) 在 css 中使用“%”设计所有内容，或使用更新的单位，如 "vm" 等（如果可能）。这样，即使页面会被缩放，但内容在任何缩放级别都将保持不变。

祝一切顺利！

Answer 4

元标记应该有效。尝试使用 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">

P.S。 : 它只会在手机上禁用缩放。

Answer 5

我搜索了很长时间并努力寻找解决此问题的简单方法，但无济于事...但后来我发现了一个名为 fullpage.js 的插件，它能够防止捏合缩放，同时仍允许触摸手势。通过js/css淘汰的过程，我发现了一个很简单的解决办法：

touch-action: none;

将此添加到我的整页元素成功地阻止了捏合缩放，但允许我通过捏合来缩放 fabricjs 对象。万岁！

Answer 6

我找到了最简单的解决方法，在 index.html 或您项目的类似文件中，在脚本标记内，包括 electron 并配置缩放级别，如下所示，

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

这适用于各种设备。视口元标记方法在桌面上效果不佳，仅修复了移动设备上的问题。

Answer 7

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

Answer 8

来自GitHub的回答：

"If you are looking for a way how to prevent zoom from main process, you can use:"

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);
});

Answer 9

我必须设置 { passive: false } 才能使其正常工作。不要问我为什么。

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

在 webkit（或 electron）中禁用捏合缩放

Disable pinch zoom in webkit (or electron)

html

javascript

css

webkit

electron